css - 如何使页脚固定在页面底部

Question

在我的 html 中，我有一个分类为“页脚”的 div。我希望它有一个 bg 到 #000 并占据整个页面宽度并且在它之后不留空白。

我目前正在使用这个 CSS:

.footer {
  color: #fff;
  clear: both;
  margin: 0em 0em 0em 0em;
  padding: 0.75em 0.75em;
  background: #000;
  position: relative;
  top: 490px;
  border-top: 1px solid #000;
}

但是整个页面宽度并没有用这个 css 代码填充。

有什么帮助吗？谢谢!

Answer 1

我使用粘性页脚:http://ryanfait.com/sticky-footer/

/*

    Sticky Footer by Ryan Fait
    http://ryanfait.com/

    */

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 142px;
  /* .push must be the same height as .footer */
}

<div class='wrapper'>
  body goes here
  <div class='push'></div>
</div>
<div class='footer'>Footer!</div>

本质上，包装器的高度为 100%，页脚的高度为负边距，确保页脚始终位于底部而不会导致滚动。

这应该可以实现您的目标，即拥有 100% 宽度的页脚和更窄的正文，因为 div 是 block 级元素，默认情况下它们的宽度是其父元素的 100%。请记住，此处的页脚不包含在包装器 div 中。