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;}

Answer 2

由于您正在寻找固定的侧边栏，因此应该是#side-panel { position: fixed; }。希望this is what you want

带有固定宽度侧杆自举的流体布局

2 个答案: