twitter-bootstrap 100% 高度，使用 twitter bootstrap 和 container-fluid
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13613034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
100% height with twitter bootstrap and container-fluid
提问by Alex Kawrykow
I have seen a number of questions about divs that take up 100% of the screen, but none quite match the requirements I have. I guess the closest would be:
我已经看到许多关于 div 占据屏幕 100% 的问题，但没有一个完全符合我的要求。我想最接近的是：
How to have multiple columns that consume 100% height using twitter bootstrap?
如何使用 twitter bootstrap 拥有多个占用 100% 高度的列？
The problem with this one is it doesn't use twitter bootstrap conventions, and I also have some extra div nesting.
这个问题是它不使用 twitter bootstrap 约定，而且我还有一些额外的 div 嵌套。
A relevant code snippet is here:
一个相关的代码片段在这里：
<!-- Standard bootstrap fixed header -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- here is the interesting section -->
<div id="app-container" class="container-fluid" style="background-color: red;">
<div id="app" class="row-fluid" style="background-color: blue;">
<div id="menu" class="span2" style="background-color: green;">
Menu
</div>
<div id="content" class="span10" style="background-color: purple;">
Content
</div>
</div>
</div>
And a link to the jsFiddle: http://jsfiddle.net/djMJX/18/
和 jsFiddle 的链接：http: //jsfiddle.net/djMJX/18/
What I need:
我需要的：
- The container-fluid div (#app-container) should reach to the bottom of the page
- There should be no extra scrolling caused by the top navbar
content should also reach the bottom of the page. If the content is longer than the page, #app-container and #content should stretch so that the content is contained within
- 容器流体 div (#app-container) 应该到达页面底部
- 顶部导航栏不应该引起额外的滚动
内容也应到达页面底部。如果内容比页面长，#app-container 和 #content 应该拉伸，以便内容包含在
I have tried various variations of setting heights and min-heights to 100%. The problem seems to arise from the extra row-fluid. I have come close where all divs reached the bottom of the page, and it looked fine when the content was short enough, but it fell apart when the content exceeded the height of the page.
我尝试了将高度和最小高度设置为 100% 的各种变化。问题似乎是由额外的排液引起的。我已经接近所有 div 到达页面底部的位置，当内容足够短时看起来不错，但是当内容超过页面高度时它会崩溃。
I appreciate any help I can get. Thanks!
我很感激我能得到的任何帮助。谢谢！
回答by Brett Postin
We have recently started using Bootstrap, however as a web app we encountered difficulty in using the grid system with 100% height. Our solution was to supplement the Bootstrap grid with some helper css classes that utilise the Flexible Box Layout module.
我们最近开始使用 Bootstrap，但是作为一个 Web 应用程序，我们在使用 100% 高度的网格系统时遇到了困难。我们的解决方案是用一些使用弹性框布局模块的辅助 css 类来补充 Bootstrap 网格。
This is the abstract from the specification:
这是规范的摘要：
The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
该规范描述了为用户界面设计优化的 CSS 框模型。在 flex 布局模型中，flex 容器的子容器可以在任何方向上布局，并且可以“伸缩”它们的大小，要么增长以填充未使用的空间，要么缩小以避免溢出父容器。可以轻松操纵子项的水平和垂直对齐方式。这些框的嵌套（水平内部垂直，或垂直内部水平）可用于构建二维布局。
Here are some further details...
这里有一些进一步的细节......
CSS Flexible Box Layout Module Specification
However the specification is only at the Candidate Recommendation stage, so it's still quite new. You will also need to consider browser support...
然而，该规范仅处于候选推荐阶段，所以它仍然很新。您还需要考虑浏览器支持...
There is a polyfill available if you do need to support older versions of IE:
如果您确实需要支持旧版本的 IE，则可以使用 polyfill：
