動態設置CSS填充頂部

Question

我可能不得不改變我用於我的網頁佈局的DIV的結構。

在this page，我有：

<div id="container_slider"></div> 
<div id="container_content"> 
    <div id="main"> 
    <div id="header"></div> 
    <div id="content"></div> 
    </div> 
</div> 

<style> 
    #container_slider {position: absolute; top: 0; z-index: 1;} 
    #container_content {position: absolute: top: 0; z-index: 10;} 
    #main {width: 940px; margin: 0 auto;} 
    #header {width: 170px; float: left;} 
    #content {width: 760px; float: right;} 
</style> 

我想要的#header顯示覆蓋#container_slider，但我想給＃內容下面#container_slider縱向顯示。

我遇到的麻煩是#container_slider的內容是響應式的，所以#container_slider的高度取決於瀏覽器的尺寸。

這意味着我無法爲#content設置精確的填充頂部。

有沒有一種方法可以動態地將＃content的padding-top設置爲value = height（#slider_container）+ 10？

或者我需要調整我構建DIV的方式嗎？

Answer 1

您可以通過此檢查文檔準備功能高度：

var heightSlider = $('#container_slider').height(); 

然後應用相同墊頂的內容：

$('#content').css({ paddingTop : heightSlider + 30 + 'px' }); 

Demo