Различный цвет фона для левого и правого с контентом, который идет к нижнему краю

Question

Я пытаюсь настроить страницу, которая имеет два цвета фона. Один цвет для левой половины страницы и другой для правой половины страницы и содержимого, расположенного посередине по центру по горизонтали. Если содержимое на странице не заполняет все окно браузера по вертикали, содержимое заканчивается, и я вижу два цвета фона под ним. Есть ли способ расширить содержимое по вертикали, чтобы всегда заполнять окно браузера? Я знаю, что липкие колонтитулы работают хорошо, но я не могу заставить их работать с тем, что я делаю.

Вот мой 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>

Это мой 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;
}

У меня есть jsfiddle, чтобы показать, что у меня есть: http://jsfiddle.net/snPYb/1/

Answer 1

Вы просто должны добавить высоту:100%; на ваш wrapper а также html,body:

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

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

FIDDLE

РЕДАКТИРОВАНИЕ № 1:

Попробуй это:

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

добавленной display:table а также width:100%

FIDDLE

Answer 2

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

То, что вам не хватало, было height:100% на обертке, а также.