jquery - 用流体容器填充整个高度

Question

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

中的所有内容

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;
}

Answer 1

你可以在这里利用 View 高度

.fill-height{
   height: 100vh;
}

您可以将父元素(可能是容器流体)的高度设置为 100vh，并相应地设置子元素的高度 请看一下 viewport-sized-typography .