一千萬個為什麽

搜索

具有絕對DIV元素的相對頁腳

我正在創建一個wordpress主題,其中標題和導航欄絕對定位,並且頁腳需要相對定位,具體取決於每個頁面上內容的高度。但是,當我嘗試將頁腳的位置設置為相對時,它會顯示在內容下方頁面的頂部。所有元素都位於相對定位的容器中。有沒有辦法解決這個問題,或動態獲取內容的高度加上標題和導航欄?

頁面結構如下:

<div id="container">
    <div id="header">
    </div>
    <div id="navbar">
    </div>
    <div id="content">
        Dynamically generated and variable height content here. 
    </div>
    <div id="footer">
    </div>
</div>

而相關的CSS是:

#container {
 position: relative;
 margin: 0px auto;
 width: 945px;
 text-align: left;
}

#header, #navbar {
 background-color: #FFFFFF;
 position: absolute;
 margin-right: auto;
 margin-left: auto;
 width: 945px;
 float: left;
}

#footer {
 height: 35px;
 margin-right: auto;
 margin-left: auto;
 width: 945px;
 position: relative;
 padding-top: 20px;
}

謝謝您的幫助。

最佳答案

這可能聽起來很明顯,但相關元素相對於它們的正常位置定位,並且絕對元素被定位“到具有非靜態位置的第一父元素”。

您的頁腳相對定位,因此它會嘗試找到最接近的前一個元素的底部。最近的相對元素是內容,因此您的頁腳位於此div的底部正下方(由於標題的白色背景,您無法看到#content)。內容div也是相對定位的,最接近的相對元素是#container,它也沒有高度。

為什麽你需要絕對定位標題和導航欄?你需要它們在屏幕中間嗎?然後我可以建議將它們放在單獨的div中,邊距為:0 auto;。

轉載註明原文: 具有絕對DIV元素的相對頁腳