HTML 不会填满整个可用空间

我的"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;
}

应用程序.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 填满整个页面吗？

T 认为这会解决您的问题

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>

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

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

更新：尝试更改元素（容器和页脚）的顺序并使用以下 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 或正文来胡思乱想。

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

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

希望这有帮助！

相关内容

最新更新

热门标签：