fill div height on the browser no matter its content

Question

I have see similar question about this but...

I want fill the green div to take 100% of the browser no matter its content.

http://jsbin.com/aculed/1/edit

HTML:

  <div id="container">

            <div id="yellow">
                    left 
            </div> 

            <div id="green">
                    right              

              <p>bla bla</p><p>bla bla</p> <p>bla bla</p><p>bla bla</p> 
            </div>
    </div>

CSS:

body, html {

            height:100%;
            background-color:grey;
    }

    #container {

            width:90%;
            background-color:white;
    } 

    #yellow {
            float:left;
            width:30%;
            background-color:yellow;
    }

    #green {
       height:100%;
            height:auto;
            margin-left: 50%;
            background-color:green;
    }

Answer 1

If you are worried about scrolling when the length is taller than the screen, use min-height:100%:

#green {
    min-height:100%;
    margin-left: 50%;
    background-color:green;
}

Edit: Firefox also requires 100% height on all parent divs up to the body:

#container {
    height:100%;
    width:90%;
    margin:0;padding:0;
    background-color:white;
} 

Answer 2

There are a few things going on here:

1. The default "height" on an element is auto*
2. When the height of a "parent" element (body, html) is auto, the resulting height is calculated based on the natural heights of the children*
3. Height "100%" on a child will search for an explicit parent height.
4. If all parents of the element have an automatic or percentage height, height:100% is functionally ignored.*

The exception to this is when you give an element absolute or fixed positioning. These will calculate widths, heights, and positions for the outermost element based on the viewport*; absolutely positioned children will have their position calculated based on their absolutely positioned parent*.
Say that five times really fast.

Basically, you can manage what you want by giving your container (and any children that you want to stretch) position:absolute; and doing some fiddling.

It will probably spiral out of your control quite quickly, but it functions. Kinda.

        #container {
                position:absolute;
                top:0;
                left:0;
                min-height:100%;
                width:90%;
                background-color:white;
        } 

        #green {
                min-height:100%;
                position:absolute;
                right:0;
                width:50%;
                background-color:green;
        }

The first place this example falls over is when you make the green box vastly bigger than the rest of your page content (which I've found can happen quite often). Because you removed the parent from flow control and gave it a height based on the viewport, it no longer calculates its height based on its children, and the larger child overflows. Yuck.

One way to hack around this is to remove the responsibility of "scrolling" the page from your HTML element. This has some special compatibility issues. It works sometimes!

        #container {
                position:absolute;
                top:0;
                overflow:auto;
                left:0;
                min-height:100%;
                width:100%;
                background-color:white;
        } 

Generally speaking I don't find using absolute positioning for everything to be good enough. Absolute positioning removes elements from flow control, and I like to take advantage of standard flow control to keep my page elements from flowing underneath or ontop of each other.

One of my favourite filthy hacks at the moment looks like this: http://jsfiddle.net/AvLQy/

<div id="h4x"></div>

<div id="content">
content
</div>
<div id="sidebar">
sidebar
</div>

#sidebar { 
    background:green;
    width:30%;
    float:right;
    position:relative; z-index:99;
}
#h4x {
    position:fixed;
    width:30%;
    top:0;
    right:0;
    height:100%;
    background:green;
    z-index:0;
}

Readers familiar with really old css hacks will notice that this is an ugly extension of faux columns.

It's ugly because it creates a spare html element.

But because it only involves pulling one element out of flow control, you don't have to worry about the effects of adding more content on a precarious interaction between childrens heights and positioned parents.

(*) sort of. read the spec for the full story

Answer 3

Following should give you what you need (http://jsbin.com/osiviq/1/):

        body, html {
                margin:0;
                padding:0;
                height:100%;
                background-color:grey;
        }

        #container {
                width:90%;
                background-color:white;
        } 

        #yellow {
                float:left;
                width:30%;
                background-color:yellow;
        }

        #green {
                height: 100%;
                position:relative;
                margin-left: 50%;
                background-color:green;
        }

Update: Add the following at the top of your css (Copied this from one of my old sites):

html, ADDRESS, APPLET, AREA, A, BASE, BASEFONT, BIG, BLOCKQUOTE, BODY, BR, B, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, div, DL, DT, EM, FONT, FORM, H1, H2, H3, H4, H5, H6, HEAD, HR, HTML, IMG, INPUT, ISINDEX, I, KBD, LINK, LI, MAP, MENU, META, OL, OPTION, PARAM, PRE, P, SAMP, SCRIPT, SELECT, SMALL, STRIKE, STRONG, STYLE, SUB, SUP, TABLE, TD, TEXTAREA, TH, TITLE, TR, TT, UL, U, VAR {
    margin:0px;
    border:0px;
    padding:0px;
}