0

我正在尝试在具有全高侧边栏的引导程序中创建响应式布局。我得到了响应部分的工作，但唯一的问题是 - 跨度的间距似乎并没有很好地结合在一起。

在右侧 - 主要内容 - 它不适合屏幕的其余部分。此外，当浏览器变得太小时 - 主要内容实际上会被侧边栏部分隐藏。

我对跨度做错了吗？如果我position: absolute;从 中删除.sidebar，那么整个.content.部分会在侧边栏下方滑动 - 但侧边栏不再是全高，并且内容仍然不能均匀地填充屏幕的其余部分。似乎不可能让它正常工作，但我想使用引导程序以方便不必重做所有集成的 CSS/JS。

例子： 跨度不填充屏幕 跨度部分隐藏

CSS

html {
    height: 100%;
}

.sidebar {
    background: #333;
    margin: 0;
    padding: 3em 2em;
    height: 100%;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    min-height: 100%;
    position: absolute;
}

.sidebar .logo { margin-bottom: 3em; }

.content {
    margin: 5em;
}

HTML

<body>
    <div class="row">
        <!-- Navigation for small screens -->
        <div class="navbar navbar-inverse hidden-desktop">
            <div class="navbar-inner">
                <a class="brand" href="/">Home Link</a>
                <ul class="nav">
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Photography</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>

        <!-- Navigation for larger screens -->
        <div class="span3 hidden-phone hidden-tablet">
            <div class="span3 sidebar">
                <div class="logo"><a class="logo-title" href="/">Home Link</a></div>

                <ul class="nav nav-pills nav-stacked">
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Photography</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
        <div class="span9 content">

<div class="span5">
    <div class="page-header">
        <h1>Hello. <small>This is.</small></h1>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus est vitae ante lobortis ultricies. Pellentesque blandit massa a velit convallis at accumsan elit gravida. Nulla facilisi. Fusce egestas consectetur velit vitae egestas. Cras vitae justo a sapien gravida condimentum. Donec lacinia lacinia ante. Proin eget est neque, ut egestas nibh. Donec non enim eu sem varius adipiscing. Proin dapibus enim a enim condimentum hendrerit. Donec vestibulum, mauris eget lobortis sagittis, enim libero dapibus augue, ac luctus ipsum augue quis purus. Aenean magna ante, elementum ac ultricies vitae, lobortis vitae augue. Nam metus erat, adipiscing posuere fringilla sit amet, molestie vel dolor. Quisque libero lacus, auctor eget porta vitae, vehicula eget mi. Vestibulum pulvinar hendrerit faucibus.

Aliquam scelerisque nisl sit amet mauris euismod bibendum. Phasellus ac laoreet enim. Praesent a felis id nisl ultrices dignissim. Nam dictum leo at quam vulputate mollis. Curabitur vitae ipsum enim, sit amet sollicitudin neque. Nunc iaculis ultricies convallis. Etiam nunc neque, consequat ac vehicula id, imperdiet in neque. Duis vitae sem magna. Nulla vehicula sapien sit amet sapien tempus tempus. Fusce pharetra dui nec risus sollicitudin vel pharetra arcu lacinia. Quisque eleifend sapien eu quam rutrum sed imperdiet nisi sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque id placerat purus.</p>
</div>
<div class="span3">
    <div class="page-header">
        <h1>Second Header. <small>Not working.</small></h1>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus est vitae ante lobortis ultricies. Pellentesque blandit massa a velit convallis at accumsan elit gravida. Nulla facilisi. Fusce egestas consectetur velit vitae egestas. Cras vitae justo a sapien gravida condimentum. Donec lacinia lacinia ante. Proin eget est neque, ut egestas nibh. Donec non enim eu sem varius adipiscing. Proin dapibus enim a enim condimentum hendrerit. Donec vestibulum, mauris eget lobortis sagittis, enim libero dapibus augue, ac luctus ipsum augue quis purus. Aenean magna ante, elementum ac ultricies vitae, lobortis vitae augue. Nam metus erat, adipiscing posuere fringilla sit amet, molestie vel dolor. Quisque libero lacus, auctor eget porta vitae, vehicula eget mi. Vestibulum pulvinar hendrerit faucibus.

    Aliquam scelerisque nisl sit amet mauris euismod bibendum. Phasellus ac laoreet enim. Praesent a felis id nisl ultrices dignissim. Nam dictum leo at quam vulputate mollis. Curabitur vitae ipsum enim, sit amet sollicitudin neque. Nunc iaculis ultricies convallis. Etiam nunc neque, consequat ac vehicula id, imperdiet in neque. Duis vitae sem magna. Nulla vehicula sapien sit amet sapien tempus tempus. Fusce pharetra dui nec risus sollicitudin vel pharetra arcu lacinia. Quisque eleifend sapien eu quam rutrum sed imperdiet nisi sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque id placerat purus.</p>

</div>

        </div>
    </div>



</body>
4

1 回答 1

1

您已经将该侧边栏设置为绝对，为什么还要打扰height: 100%? 简单地添加会更容易top:0; bottom:0。

您的侧边栏像这样滑过内容的原因是侧边栏的绝对定位。如果你想防止这种情况发生，我建议在你的侧边栏类中设置一个定义的宽度（比如 of 240px），然后将内容的 CSS 更改为如下所示：

.content {
    padding: 5em;
    left: 240px;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: auto;
}

这应该适当地限制您的内容在任何情况下都不会滑到您的侧边栏下。然后，为了使其具有适当的响应性，请在屏幕缩小时向下调整侧边栏的字体大小和宽度，并减小 的left属性.content以匹配侧边栏的宽度。

那是你要找的吗？

于 2013-03-10T04:05:23.383 回答