css - 固定幅のサイドバー ブートストラップによる柔軟なレイアウト

Question

固定サイドバーと流動的なコンテンツのレイアウトを機能させようとしています。サイドバーが にあるという問題に遭遇しましたがheight: 100%、ウィンドウ全体を埋めているようには見えません。

このフィドルを参照してください: http://jsfiddle.net/samselikoff/ZqycY/2/。緑色のサイドバーが完全に下がるはずです。

何が起こっているのですか？

Answer 1

セッティングの問題だと思いheight: 100%;ます。ブラウザのサイズを変更して短くすると、そのサイドバーはブラウザ ウィンドウの高さ全体をカバーします。次の代替 CSS を試すことができます。

/*html, body { height: 100%}*/
body {    background-color: #1db34f;}

#side-panel {
    float: left;
    width: 240px;
    padding: 10px 20px 10px 20px;
/*    height: 100%;
    background-color: #1db34f;
    border-right: 1px solid #dddddd;    */
    text-align: center;
}

#center-panel {
    margin-left: 280px;
    background-color: #ddd;
    text-align: center;
    border-left: 1px solid #dddddd;
}
#center-panel .row-fluid {overflow: auto;}
#center-panel .large {height: 400px; padding: 10px; background-color: #f17f49;}