Css 如何将页脚(div)与页面底部对齐

发布于08月20日

有人能解释一下如何将页脚div与页面底部对齐吗？从我看到的示例中，它们都显示了如何使div在底部保持可见，无论您将页面滚动到哪里.虽然我不想要那样的生活.我想把它固定在页面的底部，这样它就不会移动了.感谢你的帮助！

推荐答案

UPDATE个

我最初的答案是很久以前的，链接断了；更新它，让它继续有用.

我在内联中包含了更新的解决方案，以及一个关于JSFdle的工作示例.注意:我依赖于CSS重置，尽管我没有包括那些内联样式.请参阅normalize.css

Solution 1 - margin offset个

https://jsfiddle.net/UnsungHero97/ur20fndv/2/个

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;
}

Solution 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;
}

以下是一些更详细的解释和不同方法的链接:

ORIGINAL ANSWER个

这就是你的意思吗？

http://ryanfait.com/sticky-footer/个