使 Bootstrap 容器达到全高

Question

全貌：
示例
或
CSS：

html,body {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom:0;
  margin: auto;
  font-family: "Alef";
  background: #767E58;
  background-size: contain;
  background-image: url("../img/back1024.jpg");
  overflow-y: auto;
  overflow: auto;
}
.container {
  height: 100%;
  width: 900px;
  background-color: #000;
  /* overflow: auto; */
}

如果放大到 110% 以上，则容器小于全高。
我不知道为什么......
有什么想法我在那里做错了吗？
尝试添加：

.container:after{
    clear: both;
    content: "";
    display: block;
}

和：

<div style="clear: both; line-height: 0;">&nbsp;</div>

在这里建议：
SOW
两者都不起作用。

它确实适用于
overflow: auto;容器 DIV

但这会在该 div 上产生一个垂直滚动条，这是我不希望的。我希望在背景图像/浏览器上使用它。

我该如何解决？

Answer 1

通过 ViewportHeigth (VH) CSS3 设置高度：

这个解决方案来自 CSS3 的最后一个规范，但在 safari 浏览器中不起作用：

div {
    height: 100vh;
}

VH - 它是相对长度，如 '%'。如果您将高度设置为 100vh，则容器将占据浏览器窗口的完整高度。1 vh 相对于视口高度的 1%。codpen 示例https://codepen.io/AlexMovchan/pen/VrxaOz?editors=1100；

或者您可以使用 JS 设置全高：

HTML：

<div id='block'></div>

JS

document.getElementById('block').style.heigth = window.innerHeight + "px";

Answer 2

最初的问题是针对 Bootstrap 3.x，当时使用浮动而不是 Flexbox。

从Bootstrap 4.2 及更高版本开始，包含vh-100和min-vh-100类，并且使用这些类可以轻松制作全高容器：

<div class="container min-vh-100">
 ...
</div>

https://codeply.com/p/IPlb9eT9av

Answer 3

这是你正在研究的吗？这应该做

.container { height: 100%; position: absolute; }