CSS - 如何设置页脚样式

Question

有没有办法设置页脚的样式，所以当有内容(超过浏览器的高度)时，它将位于页面底部(隐藏)，但如果没有足够的内容，它将停留在浏览器的底部边缘？

Answer 1

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

fiddle :

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 元素。

接下来，给这个元素一个等于页脚高度的负边距。这会将其向上移动到足以为底部的页脚留出空间。

拼图的最后一 block 是 after 元素。这是填补负边距空间所必需的。否则，main 的内容将溢出到页脚。