css - 具有固定宽度侧边栏 Bootstrap 的流体布局

Question

我正在尝试让固定侧边栏和流动内容布局正常工作。我遇到了侧边栏位于 height: 100% 的问题，但它似乎没有填满整个窗口。

请参阅此 fiddle :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;}