CSS - 如何设置页脚样式

Question

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

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将溢出到页脚.