引导，匹配行＆＃39;窗高

Question

我有这个非常简单的代码：

＆＃13;

＆＃13;

 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
 
  <div class="container-fluid">
    <div class="row" style="background-color: grey;">
        <br>
    </div>
    <div class="row" style="background-color: yellow;">
      <br>
    </div>
    <div class="row" style="background-color: green;">
      <br>
    </div>    
  </div>
 

＆＃13;

＆＃13;

＆＃13;

这给出了这张照片：

如何用黄色（第二行）填充窗口的其余部分（红色方块）并将最后一行推到页面底部？

谢谢

Answer 1

您可以使用flexbox ...

https://www.codeply.com/go/eXvFDheMxT

.d-flex {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.flex-grow {
    flex-grow:1;
}

而且，在即将推出的Bootstrap 4中，不需要额外的CSS。

https://www.codeply.com/go/sNvNLAiCki

Answer 2

尝试使用页脚并将容器的最小高度设置为100％？

CSS示例

min-height: 100% !important;
height: 100% !important;
margin: 0 auto -33px;

Answer 3

＆＃13;

＆＃13;

ds

＆＃13;

.container-fluid {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.class1 {
    flex-grow:1;
    background-color: yellow;
}

＆＃13;

＆＃13;

＆＃13;