CSS - 如何风格页脚

Question

是有办法的风格页脚，所以当有一个内容（超过浏览器的高度），它会在页面（隐藏）的底部，但如果没有足够的内容会粘在底部边缘浏览器？

Answer 1

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

小提琴：

A lot of content

A little content

这里的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;
}

关键是要设置文档的主体部分有100％的min-height。此元素必须包含在页面上的一切。在我的例子，我用main元素这一点。

接着，把这个元素等于所述页脚的高度的负幅度。这使它刚好够页脚出现在底部留出空间。

拼图的最后一块是after元素。这是需要填补缘阴性的空间。否则，main的内容将溢出到页脚。

Answer 2

我只能推荐阅读这一点。 Show footer if at bottom of page or page is short else hide

或这个 http://css-tricks.com/snippets/css/fixed-footer/

Answer 3

您可以随时使用自动除垢功能CSS做出来的差异在页脚和身高之间。

页脚{

 height: calc(100vh - 100px);

}

例如...