Twitter Bootstrap 2 流畅的布局应该适合屏幕（+ 可滚动区域）答案

【问题标题】：Twitter Bootstrap 2 fluid layout should fit screen (+ scrollable area)Twitter Bootstrap 2 流畅的布局应该适合屏幕（+ 可滚动区域）
【发布时间】：2012-07-18 07:57:03
【问题描述】：

我尝试实现一个新的基于 Bootstrap 的设计。

如何使流畅的布局适合屏幕并仅创建一个可滚动区域（内容）？

我尝试将正文、html 和 Content-div 的所有父标签设置为 height:100%、overflow:hidden 并且只有 Content 设置为 overflow:auto - 但这不起作用。

有什么想法吗？

设计包含一个流体布局和三行（页眉：span2+span10，正文：span2+span10，页脚：span12）

编辑：目前我使用 jQuery 并在每次窗口大小更改时调整它的大小 - 它可以工作，但不是一个好的解决方案..

【问题讨论】：

给出溢出：滚动到容器 div
类似问题，jquery解决方案：stackoverflow.com/questions/10048967/…
Vino 提出的解决方案对您有用吗？（不适合我）。如果没有，那是什么？

标签： css layout twitter-bootstrap overflow

【解决方案1】：

假设你有类似的东西：

<div class="row-fluid">
    <div class="span3">
        Sidebar
    </div>
    <div class="span9" style="overflow:auto">
        Content
    </div>
</div>

您可以设置侧边栏 div 和内容 div both 的 CSS height（甚至 max-height），或者您可以使用 The EqualHeighs jQuery Plugin 之类的东西来动态设置高度相同（记得设置最小和最大高度：$(".x").equalHeights(100,300);）。

【讨论】：