Css 带有绝对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>

---

谢谢你的帮助

尝试将页脚的位置更改为绝对并添加底部：0px；到页脚样式

尝试将页脚位置更改为绝对并添加底部：0px；要更改页脚样式，请尝试在页脚顶部填充“；”后添加“；”，然后查看是否有效

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

---

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

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

---

这听起来很明显，但相关元素的位置相对于其正常位置，绝对元素的位置“相对于第一个父元素，该父元素的位置不是静态的”

您的页脚是相对定位的，因此它会尝试查找最近的上一个元素的底部。最近的相对元素是content，因此页脚正好位于这个div的底部（由于页眉的白色背景，您无法看到#content）。Content div也是相对定位的，最近的相对元素是#container，它也没有高度

---

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

这听起来很明显，但相关元素的位置相对于其正常位置，绝对元素的位置“相对于第一个父元素，该父元素的位置不是静态的”

您的页脚是相对定位的，因此它会尝试查找最近的上一个元素的底部。最近的相对元素是content，因此页脚正好位于这个div的底部（由于页眉的白色背景，您无法看到#content）。Content div也是相对定位的，最近的相对元素是#container，它也没有高度

---

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

页脚位于内容之后的HTML中。它出现在内容之后，您希望它出现在内容之后吗？我不明白你想做什么，你能澄清一下吗？页脚应该出现在内容的下方，但它却出现在页眉上方的页面顶部。我尝试将底部设置为0px并清除浮动，但它似乎没有任何作用。因为我无法使相对对齐正常工作，所以我只编写了一个jQuery函数来计算主要内容的高度并适当调整绝对边距顶部，这似乎有效。@Serena，你能举个例子吗？页脚在内容后面的HTML中。它出现在内容之后，您希望它出现在内容之后吗？我不明白你想做什么，你能澄清一下吗？页脚应该出现在内容的下方，但它却出现在页眉上方的页面顶部。我尝试将底部设置为0px并清除浮动，但它似乎没有任何作用。因为我无法使相对对齐正常工作，所以我只编写了一个jQuery函数来计算主要内容的高度并适当调整绝对边距顶部，这似乎有效。@Serena，你能举个例子吗？我在我的代码和我的问题中都解决了这个问题，但没有什么区别（当然，除了验证）。我知道，我在谷歌浏览器中试用了你的代码，效果很好，或者我不太明白你想做什么。您使用哪个浏览器进行测试？你需要设置定位吗？我在我的代码和我的问题中都解决了这个问题，但没有什么区别（当然除了验证）。我知道，我在谷歌浏览器中尝试了你的代码，效果很好，或者我不太明白你想做什么。您使用哪个浏览器进行测试？您需要设置定位吗？