css - Twitter Bootstrap 2 流体布局应适合屏幕(+ 可滚动区域)

Question

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

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

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

有什么想法吗？

该设计由流式布局和三行组成(页眉:span2+span10，正文:span2+span10，页脚:span12)

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

Answer 1

假设您有类似的东西:

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

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