我的 HTML 看起来像下面这样，但没有内容，因为下面只需要回答我的问题:
<html>
<body>
<div class="container">
<div class="socialmedia"></div>
<div class="navbar"></div>
<div class="mainbody></div>
<div class="footer"></div>
</div>
</body>
</html>
我一直在努力让我的页脚保留在我的网页底部，在 .mainbody 之下。但问题是，页脚似乎只位于我窗口的底部，而不是网页底部，当我有很多内容时，它可能会延伸到我的实际窗口下方。现在，我将上面的所有 div 设置为“绝对”； html 和 body 的样式也如下所示:
html, body{
height:100%;
margin:0;
padding:0;
}
html { background: url(/img/multiblock.png)repeat center center fixed; }
现在，让页脚保留在网页底部的唯一方法是设置 top:-3998px(或我最大窗口的任何高度)。显然，一旦网页上有足够的内容将其扩展到超过该高度，这将不起作用。如果我将 position 设置为 relative，它会出现在我整个网页的顶部，而当定位为 absolute 时，它只会出现在可 window 口的底部。您可以查看网站 http://www.edmuncovered.com看看我的意思或检查代码的其余部分。我网站的某些部分包括每天左右添加内容，所以我想确保网页可以随着添加的内容增加高度，但格式保持不变，页脚显然留在底部。有什么想法吗？
最佳答案
我猜这就是你需要的......
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
关于html - 试图让 .footer 保留在网页的最底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16922940/