Bootstrap 100% 高度

Question

我正在使用 asp.net 4.0 和 bootstrap 创建一个小部件页面，它将在各种不同的屏幕上访问，所以我需要让主要内容响应 grow/shrink 基于屏幕的大小。

我当前的代码与此类似 -

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

所以页眉和页脚将分别为 100 像素或 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/

Bootstrap 100% 高度

Bootstrap 100% Height

twitter

twitter-bootstrap-3

row-height