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

This question is an exact duplicate of:

这个问题与以下内容完全相同:

• CSS make colours go off to sides 3 answers

CSS使颜色偏向3个答案

I have a layout comprised of two columns that span the full width of the page. The left column is a lighter colour, the right is a darker colour. I need the text to span the container width but the backgrounds to span the full width of the page, proving far more difficult than I initially thought.

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

Here's my page structure, it's really simple, but it contains absolutely everything, rather than just the content. Is there any elegant way of containing the content while leaving the background to fill the page?

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

<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>

Fiddle below:

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

1 个解决方案

#1

Just remove height:100% from body, html, .container, .container-fluid will solve your issue.

只需删除高度:100%来自body,html,.container,.container-fluid将解决您的问题。

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

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

Check Fiddle Here.

在这里检查小提琴。