具有固定宽度侧边栏引导程序的流体布局 [英] Fluid layout with fixed-width sidebar bootstrap

问题描述

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

I'm trying to get a fixed-sidebar-with-fluid-content layout working. I've run into a problem where the sidebar is at height: 100%, but it doesn't seem to be filling the whole window.

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

See this fiddle: http://jsfiddle.net/samselikoff/ZqycY/2/. The green sidebar should go all the way down.

知道发生了什么吗?

推荐答案

我认为是 height: 100%; 设置的问题.当您调整浏览器大小以缩短它时，该侧边栏将仅覆盖浏览器窗口的整个高度.您可以尝试以下替代 CSS:

I think it's the issue with height: 100%; setting. When you resize the browser to shorten it, that sidebar will just cover the whole height of the browser window. You may try the following alternative 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;}

这篇关于具有固定宽度侧边栏引导程序的流体布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！