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

小编典典

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

css

任何人都可以解释如何将页脚div与页面底部对齐。从我所看到的示例中，它们都显示了如何使div保持在底部可见，无论您将页面滚动到何处。虽然我不想要那样。我希望它固定在页面的底部，所以它不会移动。感谢帮助！

阅读 1166

2020-05-16

共1个答案

小编典典

更新

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

我包括内联的更新解决方案，以及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; /* 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;
}

解决方案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等。

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

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

2020-05-16