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）。内容div也是相对定位的，最接近的相对元素是#container，它也没有高度。

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

Answer 2

尝试将页脚的位置更改为绝对位置并添加底部：0px;到页脚的风格

Answer 3

您发布的代码无效，请尝试添加“;”在页脚填充顶部并查看它是否有效。

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

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

3 个答案: