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

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

.fill-height{
   height: 100vh;
}

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

Answer 2

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

html, body {
    height: 100%
}

Answer 3

使用100vh方法。在CSS中，vh表示浏览器窗口的可见高度。我不建议在高度上使用百分比，因为它基于页面的总长度，包括屏幕上当前不可见的内容。您还可以执行60vh和其他值，这些值对应于浏览器窗口可见高度的60％。

用流体容器填满整个高度

3 个答案: