必须贴在网页的底部，直到 用户到达页面底部
例如
HTML
<footer>
This is a footer.
</footer>
CSS
footer {
padding: 10px;
background-color: #999999;
color: white;
text-align: right;
bottom: 0;
width: 96.75%;
position: fixed;
}
问题是，当用户还没有到达页面底部时它仍然可见。我想要它，这样在它们触底之前它是不可见的。
最佳答案
有many techniques你可以使用，大多数不涉及JavaScript。有些依赖于尚未在所有浏览器中实现的更现代的 CSS 功能(如网格)。
这是一个简单、相当健壮且跨浏览器的示例。它涉及为 body 和 HTML 提供 100% 的高度并使用负边距。
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
footer.sticky {
height: 50px;
margin-top: -50px;
background-color:#efefef;
}<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="sticky">
<p>some footer content</p>
</footer>
</body>内容越多，页脚下推
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
footer.sticky {
height: 50px;
margin-top: -50px;
background-color:#efefef;
}<body>
<div class="content">
<div class="content-inside">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<footer class="sticky">
<p>some footer content</p>
</footer>
</body>关于HTML/CSS Footer 必须贴在网页底部，在用户到达页面底部之前不应该可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49224113/