2
我正在尝试使用居中的内容区域进行全宽分割背景色。但是，内容不排队，并且在屏幕调整大小时总是关闭。以分割背景为中心的内容
居中内容区域的最大宽度为1200px，父div被拆分为60％/ 40％。当你做数学它是720px/480px并且应该匹配上面的div。
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
.site-content {
clear: both;
max-width: 1200px;
margin: 0 auto;
padding: 32px 0;
position: relative;
}
.site-content,
.left_container >div,
.right_container>div {
border: 1px solid #000;
}
.left_container,
.right_container {
padding-bottom: 100%;
margin-bottom: -100%;
/*Fixes float height*/
}
.left_container >div,
.right_container>div {
position: relative;
}
.left_container {
float: left;
width: 60%;
background-color: #ced7db;
}
.left_container > div {
float: right;
max-width: 720px;
}
.right_container {
background-color: #999;
float: right;
width: 40%;
}
.right_container > div {
max-width: 480px;
}<header>
<div class="site-content">
<h1>Heading<h2>
</div>
</header>
<div id="introduction" >
<div class="left_container">
<div>
<h2>Left</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="right_container">
<div>
<h2>Right</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>这样做的期望的结果将有标题区和左，右边缘对齐内容区域，而背景延伸到浏览器的末端。我曾尝试使用渐变背景方法，百分比宽度仍然被丢弃。
下面是使用'flexbox'的快速样机：https：//jsfiddle.net/tduwy1vf/。这里使用'display：table'：https://jsfiddle.net/tduwy1vf/1/ – dward
非常感谢您的回复。我试图修改你的样机，但似乎无法使列全长。以下是我要做的视觉模型：https：//dl.dropboxusercontent.com/u/5095783/split-bg-layout3.jpg – Harv