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

Question

我已经看到了一些关于占据100%屏幕的div的问题,但没有一个完全符合我的要求.我猜最接近的是:

如何使用twitter bootstrap使多个列消耗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-container)应该到达页面底部
• 顶部导航栏不应该有额外的滚动

• 内容也应该到达页面底部.如果内容比页面长,则#app-container和#content应该拉伸,以便内容包含在内

我尝试过将高度和最小高度设置为100%的各种变化.问题似乎来自额外的排液.我已经接近所有div到达页面底部的位置,当内容足够短时它看起来很好,但是当内容超出页面高度时它就崩溃了.

我感谢任何帮助.谢谢!

Answer 1

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

这是规范的摘要：

该规范描述了针对用户界面设计优化的 CSS 盒模型。在弹性布局模型中，弹性容器的子容器可以在任何方向上布局，并且可以“调整”它们的大小，要么增大以填充未使用的空间，要么缩小以避免溢出父容器。子级的水平和垂直对齐都可以轻松操纵。这些框的嵌套（水平嵌套垂直，或垂直嵌套水平）可用于构建二维布局。

以下是一些进一步的细节...

CSS 灵活盒子布局模块规范

简介和教程

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

我可以使用 Flexbox吗

如果您确实需要支持旧版本的 IE，可以使用 polyfill：

灵活JS