css - 具有绝对 DIV 元素的相对页脚

Question

我正在创建一个 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;
}

感谢您的帮助。

Answer 1

这听起来很明显，但相关元素是相对于它们的正常位置定位的，而绝对元素是定位到“具有非静态位置的第一个父元素”。

你的页脚是相对定位的，所以它会尝试找到最近的前一个元素的底部。最近的相关元素是内容，因此您的页脚位于此 div 底部的正下方(由于标题的白色背景，您看不到#content)。 Content div也是相对定位的，最接近的相对元素是#container，也是没有高度的。

为什么需要header和nav bar绝对定位？你需要它们在屏幕中间吗？然后我可以建议将它们放在单独的 div 中，边距为:0 auto;。