5

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

4

3 回答 3

7

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

小提琴：

很多内容

一点内容

这是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会溢出到页脚。

于 2013-10-04T23:27:59.750 回答
1

我只能推荐阅读这个。
如果在页面底部或页面很短，则显示页脚，否则隐藏

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

于 2013-10-04T23:27:52.720 回答
0

您始终可以使用 CSS 中的 calc 函数来确定页脚和正文高度之间的差异。

页脚 {

 height: calc(100vh - 100px);

}

例如...

于 2019-02-12T04:15:01.060 回答