如何将页脚（div）与页面底部对齐？

更新

我的原始答案来自很久以前，并且链接已断开；更新它，使其继续有用。

我包括内联的更新解决方案，以及JSFiddle上的工作示例。注意：尽管没有内联那些样式，但我依赖CSS重置。

HTML

<div id="wrapper">  <div id="content">    <h1>Hello, World!</h1>  </div></div><footer id="footer">  <div id="footer-content">Sticky Footer</div></footer>

CSS

html, body {  margin: 0px;  padding: 0px;  min-height: 100%;  height: 100%;}#wrapper {  background-color: #e3f2fd;  min-height: 100%;  height: auto !important;  margin-bottom: -50px; }#wrapper:after {  content: "";  display: block;  height: 50px; }#content {  height: 100%;}#footer {  height: 50px; }#footer-content {  background-color: #f3e5f5;  border: 1px solid #ab47bc;  height: 32px;   padding: 8px;}

解决方案2-Flexbox

https://jsfiddle.net/UnsungHero97/oqom5e5m/3/

HTML

<div id="content">  <h1>Hello, World!</h1></div><footer id="footer">Sticky Footer</footer>

CSS

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等。

此页脚将永久停留在页面底部。这意味着，如果内容大于浏览器窗口的高度，则需要向下滚动才能看到页脚…但是，如果内容小于浏览器窗口的高度，则页脚将停留在底部而不是浮动在页面中间。

让我知道您是否需要实施方面的帮助。我希望这有帮助。