我的“html”div(我不知道还有什么叫它)不会填满整个页面。它尽可能水平延伸,但不能垂直延伸。如果我检查“html”div然后向下滚动足够远,那么大约有1000像素的空间位于“html”div之外。奇怪的是,这个空间还有其他的div ......我不明白它们如何存在于没有html的地方。
这是一个问题的原因是我试图将页脚修复到页面的底部,但它只是修复到我的html的底部,因此它不是一直放在底部,所以它跨越了其他一些div。
要清楚,“页面”是指整页。不仅是我目前在浏览器窗口中可以看到的可见部分,而且通过垂直或水平滚动来看每个可能的像素。因此,将页脚的位置更改为固定不是解决方案。
custom.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
而变为蓝色,即使正文不会延伸到整个页面。更奇怪的是,当我删除正文的background
属性并改为设置html的background: blue
时,html的范围保持白色,但未包含在html中的页面的剩余部分变为蓝色。
任何人都知道如何让html填满整个页面?
答案 0 :(得分:0)
更新:尝试更改元素(容器和页脚)的顺序并使用以下CSS(CodePen)。
<html>
<head></head>
<body>
<div class="container">Something in my container</div>
<div id="footer">Something in my footer</div>
</body>
</html>
body {
background: blue;
}
.container {
height: 980px;
background-color: red;
float: left;
width: 100%;
}
#footer {
clear: left;
height: 60px;
background: green;
}
尝试将页脚设置为固定位置,并将底部设置为0px。根据我在你的问题中的理解,你不需要在这里使用html或body进行捣乱。
答案 1 :(得分:0)
认为这可以解决您的问题
body {
width: 100%;
background: blue;
position: relative;
}
#footer {
position: fixed;
width: 100%;
height: 60px;
bottom: 0;
background: green;
}
&#13;
<body <!--...-->
<div id="footer"></div>
<div class="container"></div>
</body>
&#13;
答案 2 :(得分:0)
您可以将页脚移动到容器下方吗?并删除页脚上的定位。
<body>
<div class="container"><%= yield %></div>
<div id="footer"></div>
</body>
答案 3 :(得分:0)
我在尝试查看我的网站时遇到此问题。我在html中需要一个标记,以便html成为设备视口的整个大小。我把这一行放在标签之后和标签之前。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
希望这有帮助!