网页的页脚没有延伸到页面的最底部
网页的页脚没有延伸到页面的最底部
提问于 2014-10-06 11:05:39
我的问题是我有一个带有页脚的网页。如果没有足够的内容填充整个页面，我希望页面将页脚扩展到浏览器窗口的底部。我也希望页脚去到页面的最底部时，内容超过浏览器的高度，并有一个垂直滚动条。
由于某些原因，我不能让它工作，我遵循了这个页面上的教程：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
而且教程特别说明了它做了我想要做的事情--“在有很多内容的长页面上，页脚被从可见页面推到最下面。就像一个普通的网站一样，当你向下滚动时，它就会出现在视图中。这意味着页脚并不总是占用宝贵的阅读空间。”
当我遵循本教程时，当没有足够的内容填充页面时，它会成功地将页脚放在页面的底部，但是当有足够多的内容时，页脚会过早地放置在浏览器窗口最初结束的位置，因为body和everything容器的高度被设置为窗口的高度，而不是整个页面的高度(带有滚动的页面高度)。
div组织如下：
<div class="everything">
<div class="main_content"></div>
<div class="template_footer"></div>
</div>我的CSS代码：
html, body {
margin:0;
padding:0;
height:100%;
}
.everything{ //main container
width:100%;
min-width:960px;
max-width:1450px;
margin-left:auto;
margin-right:auto;
min-height:100%;
position:relative;
}
.main_content{ //body container
width:100%;
position:relative;
float:left;
}
.template_footer{
width:100%;
height:44px;
background-color:rgba(0, 0, 0, .5);
position:absolute;
bottom:0;
}我还尝试了一系列不同的高度变化，但没有一个是正确的，我搜索了其他问题，他们似乎没有具体回答这个问题。
回答 2
Stack Overflow用户
发布于 2014-10-06 11:20:27
页脚绝对定位在.everything容器的底部。因此，无论内容如何，页脚将覆盖容器的底部44个像素。
Stack Overflow用户
发布于 2020-07-27 15:26:22
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
.main {
padding-bottom: 60px;
}
.footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
height: 60px;
}主要部分填充底部应大于脚注的高度。页脚部分必须是绝对位置。整个页面最小高度应为100%。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26209518
复制相关文章
相似问题
腾讯云开发者
