gpt4 book ai didi

具有 height 属性 100% 的 html 元素不会覆盖整个窗口

转载 作者:行者123 更新时间:2023-11-28 17:25:47 26 4
gpt4 key购买 nike

我想在我的页面底部有一个页脚。我遵循了很多不同的教程,但它不起作用。当我缩放屏幕直到出现滚动条时,页脚位于窗口底部而不是页面末尾。

这是我的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

when I scroll down

有没有人可以帮助我?

提前致谢!

最佳答案

肯定还有其他原因,因为您的代码在该示例中运行良好。你在使用 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com