用流体容器填充整个高度答案

【问题标题】：fill entire height with fluid container用流体容器填充整个高度
【发布时间】：2017-06-18 14:38:41
【问题描述】：

这应该是一个简单的修复，但我似乎无法弄清楚。我试图将我的容器流体类一直延伸到窗口的底部，但它不起作用。我尝试过应用

中的所有内容

Height not 100% on Container Fluid even though html and body are

但这些都不起作用。这是我的html和css：

html:

<div class="container-fluid fill-height">
  <h1 class="text-center">WikiGen</h1>

  <div class="row fill-height">
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
      <label class="align-top">Search for an article:</label>
    </div>
  </div>

  <div class="row fill-height">
    <div class="col-md-3">
    </div>
    <div class="col-md-3">
      <label class="align-top">Or, pick one at random:</label>
    </div>
    <div class="col-md-3">
      <a href="https://en.wikipedia.org/wiki/Special:Random">
        <img id = "dice" src="https://lh3.ggpht.com/kOal-qldAR-YwTvStekh0NbGnwUz-kB5idDv97ZOODRZnxKCs-52YNHLkZX3Ttbjv890=w300"/>
      </a>
    </div>
    <div class="col-md-3">
    </div>
  </div>
</div>

css:

.fill-height {
    min-height: 100%;
    height:auto !important; 
    height: 100%; 
}
.container-fluid {
  background: grey;
}
h1 {
  font-family: "Indie Flower";
  font-size: 100px;
}
h3 {
  margin: 10px;
  font-size: 20px;
}
label{
    display: inline-block;
    float: right;
    clear: left;
    width: 250px;
    font-size: 18px;
    margin: 5.5px;
    text-align: right;
}
input {
  margin: 5px;
  width: 300px;
  float: left;
}
.col-md-3 {
/*   background: black; */
}
#dice {
  width: 50px;
  height: 50px;
  margin-top: -5px;
  margin-left: 40px;
  mix-blend-mode: multiply;
}
.row {
  margin-bottom: 50px;
}
#button {
  margin-top: 2px;
}

【问题讨论】：

你没有申请body,html { height: 100%; }。它在您链接到的 SO 帖子中。

标签： jquery html css

【解决方案1】：

简单修复 - 您需要添加一个样式，将 html 和 body 元素设置为 100% 的高度。将此添加到您的 css 中，应该没问题：

html, body {
    height: 100%
}

【讨论】：

【解决方案2】：

您可以在此处利用视图高度

.fill-height{
   height: 100vh;
}

您可以将父元素（可能是容器流体）的高度设置为100vh，并相应地设置子元素的高度请查看viewport-sized-typography。

【讨论】：

【解决方案3】：

使用 100vh 方法。在 CSS 中 vh 表示浏览器窗口的可见高度。我不建议使用高度百分比，因为它基于页面的总长度，包括当前在屏幕上不可见的内容。也可以做60vh等值，对应浏览器窗口可见高度的60%。

【讨论】：