2

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

看到这个小提琴：http: //jsfiddle.net/samselikoff/ZqycY/2/。绿色侧边栏应该一直向下。

任何想法发生了什么？

4

2 回答 2

3

我觉得是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;}
于 2013-06-06T14:06:31.390 回答
2

由于您正在寻找一个固定的侧边栏，它应该是#side-panel { position: fixed; }. 希望这是你想要的

于 2013-06-06T16:29:24.937 回答