Bootstrap 100％高度

Question

我正在使用asp.net 4.0和bootstrap创建一个小部件页面，它将通过各种不同的屏幕进行访问，因此我需要根据屏幕大小响应增长/缩小的主要内容。

我目前的代码与此相似 -

<div class="container-fluid">
        <div class="row header">
           HEADER ROW
        </div><!--/.row-->

        <div class="row">
         MAIN CONTENT 
        </div

        <footer>
           FOOTER GOES HERE
        </footer>

    </div><!--/.container-fluid-->

因此页眉和页脚各占100px或10％，我希望主要内容扩展页眉和页脚之间的高度。

如何在不指定像素高度的情况下执行此操作？

谢谢

Answer 1

您可以使用弹性框。

div.wrapper {
  background:green;
  display: flex;
  flex-flow: column;
  height: 100%;
}

.header {
  border-bottom:1px solid black;
  flex: 0 1 100px;
}

div.main {
  flex: 1 1 auto;
}

footer {
  border-top:1px solid black;
  flex: 0 1 100px;
}

实施例： https://jsfiddle.net/tqaar3zr/2/