如何在容器内使用2种背景颜色在2列布局中保留内容？

我有一个由两列组成的布局，它们跨越页面的整个宽度。左栏是较浅的颜色，右栏是较深的颜色。我需要文本跨越容器宽度，但是背景要跨越页面的整个宽度，这比我最初想象的要困难得多。如何在容器内使用2种背景颜色在2列布局中保留内容？

Illustrated layout as it should be

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

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

来源

2015-05-11 Jake Gabb

你需要的东西，如：http://jsfiddle.net/uv4LkgL5/2/？ – ketan

[JSFiddle]（http://jsfiddle.net/uv4LkgL5/5/） – divy3993

当你的内容高于100％时，这也应该可以修复你的背景：http://jsfiddle.net/uv4LkgL5/7 – Pete

只是删除从body, html, .container, .container-fluidheight:100%将解决您的问题。

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

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

检查Fiddle Here.

来源

2015-05-11 10:51:07 ketan

我想你错过了这个问题的要点。这是关于扩展背景**侧身**。 –

如何在容器内使用2种背景颜色在2列布局中保留内容？

回答

相关问题