使 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>

此处推荐：

母猪

两者都不起作用。

它确实适用于

overflow: auto; 容器DIV

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

我该如何解决？

原文由 Jadeye 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

##Set heigth by 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.height = window.innerHeight + "px";

原文由 Alex Movchan 发布，翻译遵循 CC BY-SA 4.0 许可协议