您好，我正在尝试制作带有粘性页脚的简单页面。页脚贴在底部，但是当有很多内容时，它会放在粘性页脚后面。为什么？
html, body{
height: 100%;
min-height: 100%;
}
#wrapper{
height: 100%;
min-height: 100%;
margin-bottom: -50px;
}
#footer{
height: 50px;
background-color: blue;
}<html>
<body>
<div id="wrapper">
</div>
<div id="footer"></div>
</body>
</html>最佳答案
不要使用 position:absolute 创建粘性页脚。我推荐你使用 flexbox。请查看我的fiddle
代码片段:
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
main {
flex: 1 0 auto;
}
.footer {
background: crimson;
}<main>
<h2>Your Content goes here...</h2>
</main>
<footer class="footer">
This is sticky footer
</footer>关于html - 粘性页脚不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42369781/