100%高度使用twitter引导和容器流体

Question

我见过一些关于div的问题，它们占据了屏幕的100%，但是没有一个完全符合我的要求。我想最接近的是：

如何使用twitter引导程序拥有多个消耗100%高度的列？

这个问题在于它不使用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-容器)应该到达页面底部。
• 上面的肚脐不应该有额外的滚动。
• 内容也应该到达页面的底部。如果内容比页面长，则#app容器和#content应该扩展，以便将内容包含在

我尝试过各种不同的设置高度和最低高度到100%.这个问题似乎是由额外的排液引起的。我已经接近所有div到达页面底部的位置，当内容足够短时，它看起来很好，但是当内容超过页面的高度时，它就崩溃了。

我很感激我能得到的任何帮助。谢谢!

Answer 1

我们最近开始使用Bootstrap，但是作为一个web应用程序，我们在使用100%高度的网格系统时遇到了困难。我们的解决方案是用一些使用灵活的Box布局模块的辅助css类来补充Bootstrap网格。

这是规范的摘要：

该规范描述了为用户界面设计优化的CSS盒模型。在flex布局模型中，flex容器的子容器可以向任意方向布局，并且可以“弯曲”它们的大小，要么增长以填充未使用的空间，要么缩小以避免父容器溢出。儿童的水平和垂直排列都可以很容易地被操纵。这些框的嵌套(垂直内水平或水平内垂直内)可用于构建二维布局。

下面是一些进一步的细节..。

CSS柔性盒布局模块规范

导言和教程

然而，该规范仅处于候选推荐阶段，因此仍然很新。您还需要考虑浏览器支持..。

我可以用Flexbox吗？

如果您确实需要支持早期版本的IE，可以使用多填充：

FlexieJS