Question

I have a traditional 3-column layout: nav, content and sidebar.

The content and sidebar both have a background-color that needs to cover 100% of the visible height at all times, regardless of how much content is in it. In other words, the background should remain there when scrolling down, or resizing the page.

Please see this jsfiddle for reference: http://jsfiddle.net/thv20/acJVw/1/

The problem is that when you scroll down or resize, the background cuts off. How can I fix this? I’ve seen suggestions of using min-height: 100%, but I can’t get that to work.

Answer 1

Remove “height: 100%” off the body tag as this is what is breaking your layout.

Instead, use position: absolute on the side bar and position it top:0 bottom: 0 as this will make its height “100%”. Also set right: 0 to position it on the right hand side of the container div (this is safe to do as you have set widths).

CSS

#container {
    position:relative;   /*add this to use position:absolute on child element */
    overflow: hidden;    /*add this to clear your floats*/
    width: 600px;
    margin: 0 auto;
    border: 1px solid black
}

nav, section{ 
    float: left; 
    width: 200px;
}

section {
    background: red;
}

sidebar {
    background: green;
    position:absolute;     /*add this and positions below */
    top:0;
    bottom:0;
    right:0;
}

JSFiddle: http://jsfiddle.net/acJVw/6/