CODEWITHSUNDEEP
css
thv20
thv20

Reputation: 978

CSS 100% height columns, but with page still scrollable

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.

Upvotes: 2

Views: 1388

Answers (4)

maiwald
maiwald

Reputation: 932

Depending on how complex your background is, you could use a background image that has the page's width and is filled with the colors you like for your columns, set it as the page's background and repeat it (Faux Columns by Dan Cederholm).

You might also position you columns absolutely and set top: and bottom: to 0 but that's just off the top of my head. I don't know if that works cross browser, though.

.sidebar
{
    position: absolute;
    widht: 200px;
    top: 0;
    bottom: 0;
    right: 0;
}

Upvotes: 0

My Head Hurts
My Head Hurts

Reputation: 37685

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/

Upvotes: 2

dminer
dminer

Reputation: 1141

A hack :

If you make 

 body, html, #container, nav, section, sidebar {height:1000%;}

Then it will appear to work, but this completely depends on the resolution of the user screen.

Upvotes: 0

Fabio Milheiro
Fabio Milheiro

Reputation: 8474

If I understand right, what you want is a background color that is fixed in window and doesn't move when scrolling. Is this what you want?

If yes, I suggest you create a div classed 'whatever' and in your CSS file:

div.whatever
{
    position:fixed;
    z-index:-1;
    background-color:red;
    height:100%;
    top:0;
    left:/*you choose */
}

Upvotes: 0

Related Questions