Question

我的“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填满整个页面？

Answer 1

更新：尝试更改元素（容器和页脚）的顺序并使用以下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进行捣乱。

Answer 2

认为这可以解决您的问题

＆＃13;

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;

Answer 3

您可以将页脚移动到容器下方吗？并删除页脚上的定位。

<body>
  <div class="container"><%= yield %></div>
  <div id="footer"></div>
</body>

Answer 4

我在尝试查看我的网站时遇到此问题。我在html中需要一个标记，以便html成为设备视口的整个大小。我把这一行放在标签之后和标签之前。

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

希望这有帮助！

Html不会填满整个可用空间

4 个答案: