gpt4 book ai didi

Html 没有填满整个可用空间

转载 作者:行者123 更新时间:2023-11-28 03:15:29 26 4
gpt4 key购买 nike

我的“html”div(我不知道该怎么调用它)没有填满整个页面。它尽可能地水平延伸,但不是垂直延伸。如果我检查“html”div,然后向下滚动足够远,则在“html”div 之外大约有 1000 像素的空间。奇怪的是这个空间里还有其他div……我不明白它们怎么能存在于没有html的地方。

这是一个问题的原因是我试图将页脚固定到页面底部,但它只是固定到我的 html 的底部,因此它并没有一直放在底部, 所以它跨越了其他一些 div。

明确地说,“页面”是指整个页面。不仅是我当前在浏览器窗口中可以看到的可见部分,而且实际上是通过垂直或水平滚动可能看到的每个像素。因此,将页脚的位置更改为固定不是解决方案。

自定义.css:

@import "bootstrap";

html {
height: auto;
width: 100%;
}

body {
height: 100%;
width: 100%;
background: blue;
position: relative;
}

#footer {
position: absolute;
width: 100%;
height: 60px;
bottom: 0;
background: green;
}

application.html.erb

<!DOCTYPE html>
<html>
<head><!--...--></head>
<body
<!--...-->
<div id="footer"></div>
<div class="container"><%= yield %></div>
</body>
</html>

如果我设置 html 的 height: 100%,它显然只是填满了可见屏幕,所以它变得更小了。

奇怪的是,通过使正文的 background: blue 将整个页面变成蓝色,即使正文并未延伸到整个页面。更奇怪的是,当我删除 body 的 background 属性并设置 html 的 background: blue 时,html 的范围保持白色,但页面的其余部分不是包含在 html 中变成蓝色。

有人知道如何让 html 填满整个页面吗?

最佳答案

我认为这会解决你的问题

body {
width: 100%;
background: blue;
position: relative;
}
#footer {
position: fixed;
width: 100%;
height: 60px;
bottom: 0;
background: green;
}
<body <!--...-->
<div id="footer"></div>
<div class="container"></div>
</body>

关于Html 没有填满整个可用空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28268565/

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