【发布时间】：2012-11-16 18:34:41
【问题描述】：
我看到了一些关于 div 占据 100% 屏幕的问题，但没有一个完全符合我的要求。我猜最接近的是：
How to have multiple columns that consume 100% height using twitter bootstrap?
这个问题是它不使用 twitter 引导约定，而且我还有一些额外的 div 嵌套。
相关代码sn-p在这里：
<!-- 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/
我需要什么：
- container-fluid div (#app-container) 应该到达页面底部
- 顶部导航栏不应导致额外的滚动
-
内容也应该到达页面底部。如果内容比页面长，#app-container 和 #content 应该拉伸以使内容包含在其中
我尝试了将高度和最小高度设置为 100% 的各种变化。问题似乎是由额外的行流体引起的。我已经接近所有 div 到达页面底部的位置，当内容足够短时它看起来很好，但当内容超过页面高度时它就崩溃了。
感谢我能得到的任何帮助。谢谢！
【问题讨论】：
-
我想通了。我基于上面提供的链接中给出的答案。我使用的技巧是在#content div 中添加大量的填充，并具有相同数量的负下边距。添加一个溢出：隐藏到应用程序容器完成它。在此处查看 jsFiddle：jsfiddle.net/djMJX/21
标签： html css twitter-bootstrap