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的内容将溢出到页脚中。

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中使用calc函数来确定页脚和身体高度之间的差异。

页脚{

 height: calc(100vh - 100px);

}

例如...

CSS - 如何设置页脚样式

3 个答案: