Question

全貌：
Example
或
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; ON容器DIV

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

我该如何解决？

Answer 1

在容器div尝试 min-height：100％而不是 height：100％。

编辑解释

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

Answer 2

通过ViewportHeigth（VH）CSS3设置高度：

这个解决方案来自CSS3的最新规范，但在safari浏览器中没有用：

div {
    height: 100vh;
}

VH - 它的相对长度类似于＆＃39;％＆＃39;。如果你将容器设置为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 3

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

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

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

Answer 4

最初的问题是使用浮动而不是flexbox时的Bootstrap 3.x。

从 Bootstrap 4.2及更高版本开始，包含了vh-100和min-vh-100类，使用这些类可以很容易地制作出全高容器：

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

https://codeply.com/p/IPlb9eT9av

Answer 5

this你正在研究什么？这应该

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

获取Bootstrap容器到全高

5 个答案:

通过ViewportHeigth（VH）CSS3设置高度：

或者您可以使用JS：