Css – Fluid layout with fixed-width sidebar bootstrap

csstwitter-bootstrap

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.

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

Any ideas what's happening?

Best Solution

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