我想在我的页面底部有一个页脚。 我遵循了很多不同的教程，但它不起作用。 当我缩放屏幕直到出现滚动条时，页脚位于窗口底部而不是页面末尾。
这是我的CSS:
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body{
position: relative;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
min-height: 100%;
padding-bottom: 40px;
margin: 0;
}
#footer{
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin-left: 16%;
margin-right: 16%;
font-size: 11px;
margin-top: 20px;
margin-bottom: 15px;
width: 68%;
}
html结构:
<!DOCTYPE html>
<html lang="nl">
<body>
<nav>
....
</nav>
<div id="content">
....
</div>
<div id="footer">
....
</div>
</body>
</html>
图片:
the footer at the bottem of the window
有没有人可以帮助我？
提前致谢!
最佳答案
肯定还有其他原因，因为您的代码在该示例中运行良好。你在使用 iframe 吗？请尝试放一段代码
此外，如果您有一个带有 float 的元素 定位你应该放一个<div style='clear:both >`在#footer div 之前，如果您不清楚， float 元素可能会做很多奇怪的事情。
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body{
position: relative;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
min-height: 100%;
padding-bottom: 40px;
margin: 0;
}
#footer{
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin-left: 16%;
margin-right: 16%;
font-size: 11px;
margin-top: 20px;
margin-bottom: 15px;
width: 68%;
}<html>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="footer"> footer</div>
</body>
</html>关于具有 height 属性 100% 的 html 元素不会覆盖整个窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40156763/