Question

我正在尝试在bootstrap中创建一个具有全高侧边栏的响应式布局。我得到了响应部分的工作，但唯一的问题是 - 跨度的间距似乎并不能很好地协同工作。

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

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

实施例： Spans not filling screen Span partially hidden

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>

Answer 1

您已经将该侧边栏设置为绝对，为什么还要使用height: 100%？简单地添加top:0; bottom:0。

会更容易

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

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

这应该适当地限制您的内容，以便在任何情况下都不会在侧边栏下滑动。然后，为了使其适当响应，请在屏幕缩小时调整侧边栏的字体大小和宽度，并降低left的{{1}}属性以匹配侧边栏的宽度。

这就是你要找的东西吗？

Bootstrap跨度不适用于全高侧边栏

1 个答案: