将 Bootstrap 容器设置为全高

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;
}

And:

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

这里推荐：
SOW https://stackoverflow.com/questions/7817269/css-container-div-not-getting-height
两者都不起作用。

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

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

我该如何解决这个问题？

##通过视口高度（VH）CSS3设置高度： 这个解决方案来自 CSS3 的最新规范，但在 safari 浏览器中不起作用：

div {
    height: 100vh;
}

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

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

HTML:

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

JS

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