How to have multiple columns that consume 100% height using twitter bootstrap?
这个问题是它不使用twitter引导程序约定,而且我还有一些额外的div嵌套.
相关的代码段在这里：
<!-- 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>
并链接到jsFiddle：http://jsfiddle.net/djMJX/18/
我需要的：
>容器 – 流体div(#app-container)应该到达页面底部
>顶部导航栏不应引起额外滚动
>内容也应该到达页面底部.如果内容比页面长,则#app-container和#content应该拉伸,以便内容包含在内
我尝试过将高度和最小高度设置为100％的各种变化.问题似乎来自额外的排液.我已经接近所有div到达页面底部的位置,当内容足够短时它看起来很好,但是当内容超出页面高度时它就崩溃了.
我感谢任何帮助.谢谢！
解决方法
这是规范中的摘要：
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 Flexible Box Layout Module Specification
然而,规范仅在候选推荐阶段,所以它仍然是新的.您还需要考虑浏览器支持…
如果您确实需要支持旧版本的IE,则可以使用polyfill：
