CSS - 如何给底部添加样式

Question

有没有一种方式可以为页脚添加样式，在页面内容超过浏览器高度时，页脚将在页面底部（隐藏），但如果内容不足，则会保持在浏览器底部边缘？

- Pavel

---

只需将其放在页面底部并使用 min-height。只要页脚后面没有其他内容，它就会占据页面的剩余部分。 - user1508519

阅读此内容：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page，然后研究jQuery Waypoints。 - Sualkcin

Answer 1

我使用的一个解决方案需要已知页脚高度。

代码演示:

大量内容

少量内容

以下是HTML代码：

<main>
  hello
</main>
<footer>
  i am the footer
</footer>

以下是CSS代码：

html, body {
    height: 100%;
}
main {
    min-height: 100%;
    margin-bottom: -100px;
    background: #ddd;
}
main:after {
    content: "";
    display: block;
    height: 100px;
}
footer {
    height: 100px;
    background: #eee;
}

技巧在于将文档的主要部分设置为min-height为100％。此元素必须包含页面上的所有其他内容。在我的示例中，我使用了main元素。

接下来，给这个元素一个等于页脚高度的负边距。这使它向上移动足够的距离，在底部留出页脚的空间。

谜题的最后一部分是after元素。这是必需的，以填充该负边距的空间。否则，main内容将溢出到页脚中。

- jamesplease

---

这个不起作用 http://jsfiddle.net/9hVyy/.... 内容放在页脚上，尝试使用多个 <br/> 并输入“end”，这个“end”就是页脚。 - Pavel

如果你保留main:after的样式，它会运行得非常好。詹姆斯做得很好。 - Orbiting Eden

Answer 2

我建议阅读这篇文章。
如果页面在底部或者页面比较短，显示页脚，否则隐藏
或者这篇文章
http://css-tricks.com/snippets/css/fixed-footer/

- ummahusla

Answer 3

你可以在CSS中使用calc函数来计算页脚和正文高度之间的差异。

页脚 {

 height: calc(100vh - 100px);

}

例如...

- javascriptes