我正在创建一个 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)。 Content div也是相对定位的,最接近的相对元素是#container,也是没有高度的。
为什么需要header和nav bar绝对定位?你需要它们在屏幕中间吗?然后我可以建议将它们放在单独的 div 中,边距为:0 auto;。
关于css - 具有绝对 DIV 元素的相对页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2664084/