有没有一种方式可以为页脚添加样式,在页面内容超过浏览器高度时,页脚将在页面底部(隐藏),但如果内容不足,则会保持在浏览器底部边缘?
我使用的一个解决方案需要已知页脚高度。
代码演示:
以下是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
内容将溢出到页脚中。
height: calc(100vh - 100px);
}
例如...
min-height
。只要页脚后面没有其他内容,它就会占据页面的剩余部分。 - user1508519