让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上产生一个垂直滚动条，而我不希望出现。 我希望它出现在背景图片/浏览器上。

我该怎么办？

- Jadeye

---

图片链接是垃圾邮件，请不要点击。 - Drew Dello Stritto

@DrewDelloStritto 你是什么意思？这个 url("../img/back1024.jpg"); 是什么意思？ - Jadeye

Answer 1

##使用视口高度（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

---

虽然这段代码片段可能解决了问题，但包括解释真的有助于提高您的帖子质量。请记住，您正在为未来的读者回答问题，而这些人可能不知道您的代码建议原因。 - Clijsters

我改了解释，谢谢。 - Alex Movchan

这似乎是我情况下（在Bootstrap容器中设置Leaflet地图的全高）最好的解决方案，谢谢。 - Sören Kuklau

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

- Zim

Answer 3

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

编辑：解释

当您将高度设置为100％时，它取决于父元素的尺寸，在这种情况下为body。它的初始高度是屏幕没有滚动条的高度。因此，如果div的内容超出屏幕，则需要超过100％的高度。如果您没有为高度属性设置任何值，则div的高度将适合内容。但是，如果您缩小视图，则它不会扩展。如果您将min-height设置为100％，则可以解决此问题。

- Crepi

---

最好为这个问题的未来观众添加一个关于如何以及为什么特定代码片段可以回答问题的解释。 - Heretic Monkey

它可以工作，但它也影响了页眉标志，它在最小高度后消失了。请查看示例链接。 - Jadeye

@Jadeye 你的头部是否采用了position:fixed？如果你不想它固定，可以将其包含在容器中，然后剩余部分的最小高度为calc(100% - headerHeight)。 - HaLeiVi

Answer 4

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

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

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

- Jadeye

Answer 5

你是在研究this吗？ 这个应该可以

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

- N.Venkatesh Naik