如何将内容保留在容器内有2种背景颜色的2列布局中？

Question

我的布局包含两列，跨越页面的整个宽度。左栏是浅色，右栏是较暗的颜色。我需要文本跨越容器宽度，但背景跨越页面的整个宽度，证明比我最初想象的困难得多。

这是我的页面结构，它非常简单，但它包含绝对的一切，而不仅仅是内容。是否有任何优雅的方式来包含内容，同时让背景填满页面？

<div class="container">
    <div class="col-xs-4" style="background-color: #ddd; height: 100%">
        ..Menu..
    </div>
    <div class="col-xs-8" style="background-color: #aaa; height: 100%">
        ..Content..
    </div>
</div>

以下小提琴：

http://jsfiddle.net/uv4LkgL5/1/

Answer 1

从height:100%移除body, html, .container, .container-fluid即可解决您的问题。

body, html, .container, .container-fluid {

    padding-left: 0px;
    padding-right: 0px;
}

检查Fiddle Here.