兒童DIV動態高度和絕對位置 - 給予高度父DIV

Question

（請記住，我不是代碼精明）

http://sebcastilho.com/

我想要的圖像滑塊拉伸到的全寬瀏覽器。該網站的主題使用了一些響應式代碼，因此滑塊的父DIV的寬度不能設置爲100％。

所以解決的辦法是'position：absolute'來讓滑塊適合瀏覽器的100％寬度。但是，當我這樣做時，瀏覽器不知道滑塊的內容有多高，因此網站的下一部分最終向上移動並被滑塊覆蓋。

如何根據滑塊的高度（基於其寬度有多少像素是動態的）來動態更改高度的皇家滑塊的父DIV？

編輯（之後ncardeli的回答） 我得到了這段代碼，我發現工作。它獲得滑塊div（具有position：absolute的那個）的高度，並將高度提供給包含div。

$(document).ready(function(){ 
    var x = $('#new-royalslider-1').height(); 
    $('.photographySlider').css('height', x); 
}) 

我的問題是，如果瀏覽器更改大小，它不會刷新。我怎樣才能做到這一點？

Answer 1

純CSS的解決方案可能是可行的，使用vw unit和calc。

您應該將滑塊的寬度設置爲100vw，並將其相對位置。

#new-royalslider-1 { 
    background-color: black; 
    margin: 0 auto; 
    overflow: visible; 
    padding: 0; 
    position: relative; 
    width: 100vw !important; 
} 

然後，您應該爲每個斷點設置一個規則，將左側設置爲計算值。

@media (min-width: 768px) { 
    #new-royalslider-1 { 
     left: calc((750px - 100vw)/2 - 15px); 
    } 
} 

@media (min-width: 992px) { 
    #new-royalslider-1 { 
     left: calc((970px - 100vw)/2 - 15px); 
    } 
} 

@media (min-width: 1200px) { 
    #new-royalslider-1 { 
     left: calc((1170px - 100vw)/2 - 15px); 
    } 
} 

入住這裏瀏覽器的支持：

• 計算器：http://caniuse.com/#feat=calc

• 從從其減去容器寬度與視口寬度和左填充值的計算值結果

  vw unit：http://caniuse.com/#feat=viewport-units

如果你喜歡一個Javascript的解決方案，這個腳本會做什麼：

$(window).on('resize', function(){ 
    $('.photographySlider').height($('#new-royalslider-1').height()); 
})