有没有办法设置页脚的样式，所以当有内容（超过浏览器的高度）时，它将位于页面底部（隐藏），但如果没有足够的内容，它将粘在底部边缘浏览器？
问问题
43774 次
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
于 2013-10-04T23:27:52.720 回答
0
您始终可以使用 CSS 中的 calc 函数来确定页脚和正文高度之间的差异。
页脚 {
height: calc(100vh - 100px);
}
例如...
于 2019-02-12T04:15:01.060 回答