如何让页脚停留在网页的底部？
我有一个简单的2栏布局，页脚清除了我的标记中的右侧和左侧div。 我的问题是，我无法让页脚停留在所有浏览器的页面底部。 如果内容推下页脚，它就会有效，但情况并非总是如此。
更新：
它在Firefox中无法正常工作。 当页面上没有足够的内容将页脚一直推到浏览器窗口的底部时，我会在页脚下方看到一段背景色。 不幸的是，这是页面的默认状态。
要获得粘性页脚：
为您的内容设置一个带有class="wrapper"的<div> 。
在wrapper的结束</div> 之前放置<div class="push"></div> 。
闭合后右</div>所述的wrapper放置<div class="footer"></div>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
使用CSS vh单元！
也许最明显的和非傻瓜的方法是使用新的CSS视口单元。
以下面简单的标记为例：
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>
如果页眉的高度是80px，页脚高度是40px，那么我们可以在内容div上使用单个规则制作粘性页脚：
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
}
这意味着：让内容div的高度至少为视口高度的100％减去页眉和页脚的组合高度。
而已。
* {
margin:0;
padding:0;
}
header {
background: yellow;
height: 80px;
}
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
background: pink;
}
footer {
height: 40px;
background: aqua;
}<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>你可以使用position: absolute来将页脚放在页面的底部，但是确保你的2列有适当的margin-bottom这样它们就不会被页脚遮挡。
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
#content, #sidebar {
margin-bottom: 5em;
}
上一篇: How do you get the footer to stay at the bottom of a Web page?