Twitter bootstrap - 固定布局,可滚动侧边栏

Question

Twitter bootstrap - 固定布局,可滚动侧边栏

Ran*_*and 28 css3 twitter-bootstrap

我正在尝试使用twitter bootstrap实现一个简单的标题+ 2列布局.

我有一个100%宽度的固定标题,我现在试图有两个带有独立滚动条的固定宽度全高列.使用twitter bootstrap有什么好办法吗？

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

Answer 1

Sou*_*sak 35

在目标div上使用bootstrap的' pre-scrollable '类.将div设置为某个固定的最大高度.它的美学也很好.

在您找到可预滚动类的参考/链接时会很高兴 (6认同)

Answer 2

Ran*_*and 8

我找到了办法.不确定它是最好的,但它可以解决问题:

<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>

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	13 年，10 月前
查看次数：	41991 次
最近记录：	12 年，6 月前