Twitter bootstrap - 带有可滚动侧边栏的固定布局答案

【问题标题】：Twitter bootstrap - Fixed layout with scrollable sidebarTwitter bootstrap - 带有可滚动侧边栏的固定布局
【发布时间】：2012-04-17 08:08:07
【问题描述】：

我正在尝试使用 twitter 引导程序实现一个简单的标题 + 2 列布局。

我有一个 100% 宽度的固定标题，我现在正尝试使用两个具有独立滚动条的固定宽度全高列。 twitter bootstrap 有什么好的方法吗？

这是我正在尝试构建的布局图片

【问题讨论】：

标题工作正常（navbar-fixed-top）对于列，我使用一个包含一行和两个跨度*的容器。容器和行有溢出：隐藏和高度：100%，而跨度有溢出：自动
关于我的意思的布局。
我编辑了之前的评论，不小心按了回车

标签： css twitter-bootstrap

【解决方案1】：

在目标 div 上使用引导程序的“pre-scrollable”类。将 div 设置为某个固定的最大高度。它在美学上也很好。

【讨论】：

我将它与“井”一起使用，它创造了我需要的效果——看起来就像上面问的那样，而且更简单——这应该是答案。
如果您能在其中找到可滚动类的参考/链接，那就太好了

【解决方案2】：

我找到了一种方法。不确定它是不是最好的，但它可以解决问题：

<html>

<head>

    <link rel="stylesheet" media="screen" href="normalize.css">
    <link rel="stylesheet" media="screen" href="bootstrap.min.css">

    <style type="text/css">
            body, html {
                height: 100%;
                overflow: hidden;
            }

            .navbar-inner {
                height: 40px;
            }

            .scrollable {
                height: 100%;
                overflow: auto;
            }

            .max-height {
                height: 100%;
            }

            .no-overflow {
                overflow: hidden;
            }

            .pad40-top {
                padding-top: 40px;
            }
    </style>
</head>

<body>

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                header contents
            </div>
        </div>
    </div>

    <div class="container max-height no-overflow">
        <div class="row max-height">

            <div class="span8 scrollable">
                <div class="pad40-top">
                    main contents
                </div>
            </div>

            <div class="span4 scrollable">
                <div class="pad40-top">
                    right sidebar contents
                </div>
            </div>

        </div>
    </div>
</body>

http://jsfiddle.net/m4eS4/7/

【讨论】：

@lenzai .. 你确定小提琴按预期工作吗？我没有看到右侧边栏。谢谢。
@MayankJaiswal 似乎滚动条仅在需要时出现。即当屏幕足够小时。请注意，如果您调整窗口大小，则应该刷新页面，因为我猜，引导 javascript 仅在页面加载时执行。
body overflow:hidden 在浏览器窗口变小时无法播放。在这种情况下你无法滚动。