0

コンテンツが含まれるページがあります<html></html>- 縦方向のオーバーフローがあっても、サイドバーをページの一番下まで広げようとしています。

これは、垂直オーバーフローがない場合は機能しますが、ある場合は、ページが読み込まれたときにページの下部があった場所でサイドバーが停止します。

Chrome 開発ツールを使用すると、すべての要素 ( まで<html>) の高さが、ウィンドウがロードされたときの大きさに制限されていることがわかります。これは正常ですか？すべてのコンテンツを含めるために垂直にスパンするように指示できれば問題は解決<html>しますが、それが正しい解決策かどうかはわかりません。

サイドバーとすべての親を、html を含む高さ:100% に設定しました。

html, body, .durandal-wrapper, #shell-row, #sidebar {
    height: 100% !important;
}

私はjsfiddleでこのデモを取得することに取り組んできましたが、動作させることができません。私の側では次のようになります。

ここに画像の説明を入力

4

2 に答える 2

2

これを実現するには、css テーブルを使用できます。

フィドル 1 フィドル2

マークアップ

<div class="container">
    <div class="sideBar">sideBar</div>
    <div class="main">
        Content.
    </div>
</div>

CSS

.container
{
    display: table;
}
.sideBar
{
    display: table-cell;
    background:pink;
    width: 100px;
}
.main
{
    display: table-cell;
    background:yellow;
    overflow:auto;
    vertical-align: top;   
}
于 2013-07-14T18:57:24.873 に答える