我的原始答案来自很久以前，并且链接已断开；更新它，使其继续有用。
我包括内联的更新解决方案，以及JSfiddle上的工作示例。注意：尽管没有内联那些样式，但我依赖CSS重置。
<div id="wrapper">
<div id="content">
<h1>Hello, World!</h1>
</div>
</div>
<footer id="footer">
<div id="footer-content">Sticky Footer</div>
</footer>
html, body {
margin: 0px;
padding: 0px;
min-height: 100%;
height: 100%;
}
#wrapper {
background-color: #e3f2fd;
min-height: 100%;
height: auto !important;
margin-bottom: -50px; /* the bottom margin is the negative value of the footer's total height */
}
#wrapper:after {
content: "";
display: block;
height: 50px; /* the footer's total height */
}
#content {
height: 100%;
}
#footer {
height: 50px; /* the footer's total height */
}
#footer-content {
background-color: #f3e5f5;
border: 1px solid #ab47bc;
height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
padding: 8px;
}
https://jsfiddle.net/UnsungHero97/oqom5e5m/3/
<div id="content">
<h1>Hello, World!</h1>
</div>
<footer id="footer">Sticky Footer</footer>
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
#content {
background-color: #e3f2fd;
flex: 1;
padding: 20px;
}
#footer {
background-color: #f3e5f5;
padding: 20px;
}
此方法仅使用15行CSS，几乎不使用任何HTML标记。更好的是，它是完全有效的CSS，并且可以在所有主流浏览器中使用。Internet Explorer 5及更高版本，Firefox，Safari，Opera等。
此页脚将永久停留在页面底部。这意味着，如果内容大于浏览器窗口的高度，则需要向下滚动才能看到页脚…但是，如果内容小于浏览器窗口的高度，则页脚将停留在底部而不是浮动在页面中间。
让我知道您是否需要实施方面的帮助。我希望这有帮助。
602392714
清零编程群