4

新しい Bootstrap ベースのデザインを実装しようとしています。

ここに画像の説明を入力

流動的なレイアウトを画面に合わせて、スクロール可能な領域 (コンテンツ) を 1 つだけ作成するにはどうすればよいですか?

Content-div の body、html、およびすべての親タグを height:100%、overflow:hidden に設定しようとしましたが、コンテンツのみが overflow:auto に設定されていますが、これは機能しません。

何か案は？

このデザインは流動的なレイアウトと 3 つの行 (ヘッダー:span2+span10、本文:span2+span10、フッター:span12) で構成されます。

編集: 現時点では、jQuery を使用して、ウィンドウのサイズが変更されるたびにサイズを変更します - 動作しますが、良い解決策ではありません..

4

1 に答える 1

1

あなたがこれに似たものを持っていると仮定します：

<div class="row-fluid">
    <div class="span3">
        Sidebar
    </div>
    <div class="span9" style="overflow:auto">
        Content
    </div>
</div>

サイドバーdivとコンテンツdivの両方のCSS height（またはmax-height）を設定するか、 EqualHeighs jQueryプラグインなどを使用して高さを動的に同じに設定できます（最小および最大の高さを設定することを忘れないでください:) 。 $(".x").equalHeights(100,300);

于 2012-08-07T15:01:33.917 に答える