Different background color for left and right with content that entends to the bottom edge

Question

I am trying to set up a page that has two background colors. One color for the left half of the page and another for the right half of the page and content that sits in the middle that is centered horizontally. If the content in the page does not fill the entire browser window vertically, the content ends and I can see the two background colors below it. Is there a way to extend the content vertically to always fill the browser window? I know sticky footers works well, but I can't seem to get it to work with what I am doing.

Here is my HTML:

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
    <div id="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
    </div>
</div>
<div id="footer">Footer footer footer</div>

This is my CSS:

html, body {
    margin: 0; padding: 0; border: 0; 
}
#left, #right {
    position: fixed;
    width: 50%;
    height: 100%;
    top: 0;
}
#left {
    background: #014c8d;
    left: 0;
}
#right {
    background: #0f2451;
    right: 0;
}
#container {
    background: #fff;
    width: 70%;
    max-width: 500px;
    height: 100%;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}
#wrapper {
    position: relative;
    background: #006d46;
}
#footer {
    background: #006d46;
    position: relative;
}

I have a jsfiddle to show what I currently have: http://jsfiddle.net/snPYb/1/

Answer 1

You just have to add height:100%; to your wrapper and html,body :

html, body {
    margin: 0; padding: 0; border: 0; 
    height:100%;
}

#wrapper {
    position: relative;
    background: #006d46;
    height:100%;
}

FIDDLE

EDIT #1 :

Try this :

html, body {
    margin: 0; padding: 0; border: 0; 
    display:table;
    height:100%;
    width:100%; 
}

Added display:table and width:100%

FIDDLE

Answer 2

http://jsfiddle.net/snPYb/3/

What you were missing was the height:100% on the wrapper as well.