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 に答える