所以我创建了一个联系页面，我希望页脚 div 不会紧贴在联系表单之后的页面底部。
但如果我将所有内容放入容器div 和height:100%; 并制作页脚bottom:0; 那么页面将“太长”，您必须滚动等等...
到目前为止我的css：
#footer{
background-color:#fff;
font:bold 14px;
color:#1E88E5;
width:100%;
height:auto;
padding:1%;
border-top:1px solid #1E88E5;
}
页脚只是一个正常的全宽div，带有一些居中的文本atm。
【问题讨论】：
如果您需要粘性页脚，可以使用 2 个解决方案。
解决方案 1：
HTML：
<div class="wrap">
Content
</div>
<div class="footer">
Sticky Footer
</div>
CSS：
body, html, .wrap{
height:100%;
}
body > .wrap{
height:auto;
min-height:100%;
}
.wrap:after {
content: "";
display: block;
height: 100px;
}
.footer{
background:#662e8c;
margin-top:-100px;
height:100px;
color:#fff;
position:relative;
line-height:180%;
padding:0 10px;
}
示例：https://jsfiddle.net/ta1amejn/
解决方案 2（使用表格属性）：
HTML: 内容 页脚
CSS：
body{
display:table;
width: 100%;
}
html, body{
height:100%;
}
.main{
height:100%;
width:100%;
padding-bottom:20px;
background:#eee;
display:table-row;
}
.footer{
/*height:30px;*/
line-height:30px;
width:100%;
background:#00f0ad;
display:table-row;
}
示例：https://jsfiddle.net/zbtaoq1b/
如果您想要固定页脚，请使用此解决方案：
.footer{
position: fixed;
bottom: 0;
}
【讨论】：
您或许可以使用position: fixed 来实现这一点。
.footer {
position: fixed;
bottom: 0;
}
这样您将需要偏移页面底部，因此建议将padding-bottom 添加到.main，即页脚的高度。
.main {
padding-bottom: 30px /*whatever the height of your footer is*/
}
【讨论】：
Pritesh Gupta's solution 非常适合我：
我正在复制+粘贴代码，以防他们的网站出现故障：
这是 HTML：
<!DOCTYPE html>
<html>
<head>
<title>Sticky Footer</title>
</head>
<body>
<main>stuff</main>
<footer>© 2016</footer>
</body>
</html>
这是 CSS：
body {
margin: 0;
}
main {
min-height: calc(100vh - 4rem);
}
footer {
height: 4rem;
}
我不知道它是否适用于旧浏览器，但我自己并不担心。
这还取决于您是否知道页脚的高度，尽管值得指出的是，您不必像上面的代码那样手动设置高度，因为如果您知道如何设置，您总能弄清楚它是什么内容有很多垂直填充和行高...
希望这会有所帮助，我花了大部分时间尝试网络上的每一个粘性页脚教程，然后才偶然发现这项技术，虽然 other 技术确实有效，但这项技术只需要很少的努力。
【讨论】：
您可以使用display: flex 轻松做到这一点。
你不在乎身高body 或wrapper 标签。
示例：如果您愿意，请将main tag 的高度更改为任意值，footer 始终粘在底部（不是position: fixed）。
https://codepen.io/tronghiep92/pen/dzwRrO
HTML 标记
<div id="wrapper">
<header>my header</header>
<main>main content, please change height</main>
<footer>
my footer
</footer>
</div>
CSS 解决方案
#wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
height: 100px;
background: yellow;
}
footer {
height: 50px;
background: red;
margin-top: auto; /* this is the solution */
}
main {
height: 100px
}
或者您可以：
#wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
header {
height: 100px;
background: yellow;
}
footer {
height: 50px;
background: red;
}
main {
flex: 1;
height: 100px;
}
【讨论】：