Html 使 Bootstrap 容器达到全高

Get Bootstrap container to full height

提问by Jadeye

The full picture:
Example
OR
CSS:

全貌：
示例
或
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; */
}

If you zoom above 110% the container is smaller then full height.
I could not find out why...
Any ideas what I'm doing wrong there?
Tried adding:

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

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

And:

和：

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

Suggested here:
SOW
Both didn't work.

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

IT DOES WORK WITH
overflow: auto;ON container DIV

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

But that yields a vertical scroll bar on that div, which I do not wish to have. I wish to have it on the background image/ browser.

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

How can I fix that??

我该如何解决？

回答by Alex Movchan

Set heigth by ViewportHeigth (VH) CSS3:

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

This solution from last specification of CSS3, But no works in safari browser:

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

div {
    height: 100vh;
}

VH - it's relative length like '%'. If you set heigth 100vh the container take full heigth of browser window. 1 vh relative to 1% of the height of the viewport. Example on codpen https://codepen.io/AlexMovchan/pen/VrxaOz?editors=1100;

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

Or you can set the full height by using JS:

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

HTML:

HTML：

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

JS

JS

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

回答by Crepi

Try with min-height: 100%instead of height: 100%at container div.

尝试使用min-height: 100%而不是height: 100%在容器 div。

edit:explanation

编辑：解释

When you put height to 100%, it depends on dimensions of parent element, in this case body. And it's initial height is height of the screen without scroll. So, if div's content doesn't fit the screen it needs more than 100%. If you don't put anything for the height attribute, div height will fit content. But then it won't expand if you zoom out. That's fixed if you put min-height: 100%.

当您将高度设置为 100% 时，它取决于父元素的尺寸，在本例中为body。它的初始高度是没有滚动的屏幕高度。因此，如果 div 的内容不适合屏幕，则需要超过 100%。如果您没有为 height 属性添加任何内容，则 div 高度将适合内容。但是如果你缩小它就不会扩大。如果您将 min-height: 100% 设置为固定。

回答by Jadeye

Solution was what @Crepi has suggested along with changing Header Logo DIV Height from percentage to fixed px size and removing the top:

解决方案是@Crepi 建议将 Header Logo DIV 高度从百分比更改为固定像素大小并删除顶部：

.container {
  min-height: 100%;
  width: 900px;
  background-color: #000;
}

.headLogo {
  width: 242px;
  height: 200px;
  /* top: 6%; */

回答by N.Venkatesh Naik

Is thiswhat you are looking into? This should do

是这个你正在寻找变成了什么？这应该做

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

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