When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it's not immediately obvious how this can be done.
我有这样的 html 结构:
<html>
<body>
<div class="wrapper">
....
</div>
<div class="footer" id="cdFooter">
.......
</div>
</body>
</html>
我试过网上说的，这样设置css规则
html,body {
position: relative;
min-height: 100%;
}
.wrapper {
min-height:100%;
position: relative;
overflow:hidden !important;
}
.footer {
bottom: 0;
width: 100%;
}
(一些其他的 css 规则你可以在下面的 URL 中看到，我不能在这里放太多代码。)
但如果您使用的是大屏幕桌面，页脚仍不会位于浏览器底部。您可以在此 URL 查看结果:http://dev.xinruima.me/readistep/
有人说，我需要将包装器设置为 margin-bottom: **px 之类的规则，但这对我的网站不起作用。
有人可以看看我的 URL 看看有没有办法很好地解决这个问题？我希望它能够响应，所以我可能不会使用固定高度来向下插入元素或类似的东西。
谢谢。
如果我使用 position: absolute，它会覆盖包装器。 我也用 body {height: 100%}，它对我不起作用。有人可以尝试编辑我的网址吗？
我认为问题在于，如果我们能够像 html 那样使 body 的高度 100% 与浏览器高度一样高，那么问题就解决了，希望如此。
最佳答案
您没有指定页脚的显示方式。您还需要更改 body 元素的高度:
body {
height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
关于html - 只是不能让页脚留在底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24812035/