双色部分全宽，带有＃34; restrcited＆＃34;容器宽度

Question

这个想法是页面的某些部分有两列颜色：
[ Column left color red ] [ Column right color green ]
所以基本上html现在看起来像这样。

<section id="foo">
 <div class="wrapper-content">
  <div class="col-sm-5 bg-red">Some content</div>
  <div class="col-sm-7 bg-green">Some Other Content</div>
 </div>
</section>

这给了我如何看待它，全宽2列用不同的颜色，问题是容器。 第一张图片是我需要的 第二张图片是我得到的


以下代码根本不起作用....

<section id="foo">
 <div class="wrapper-content">
  <div class="col-sm-5 bg-red same-height"></div>
  <div class="col-sm-7 bg-green same-height"></div>
  <div class="container absolute">          
   <div class="col-sm-5">Some content</div>
   <div class="col-sm-7">Some Other Content</div>
  </div>
</div>

左边的颜色一直向左移动，右边的颜色一直向右，内容必须保持在两个列的中间位置。
有任何想法吗？     

Answer 1

这可能有用。您必须将相同背景颜色的div放在前景div之后，绝对定位。

容器不会限制小宽度的尺寸，因此您可能需要将代码段扩展到整页以查看结果（黑色边框用于显示内容区域的边界）

＆＃13;

＆＃13;

.header {
  background-color: beige;
  margin-bottom: 20px;
}

.main-content {
  position: relative;
}

.left-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  background-color: #dddddd;
}

.right-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  background-color: #aaaaaa;
}

.left-fg {
  background-color: #dddddd;
  border: 1px solid black;
  padding: 30px 0;
}

.right-fg {
  background-color: #aaaaaa;
  border: 1px solid black;
  padding: 30px 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="header">Header</div>

<div class="main-content">
  <div class="left-bg"></div>
  <div class="right-bg"></div>
  <div class="container">
    <div class="row">
      <div class="left-fg col-xs-5">Hello</div>
      <div class="right-fg col-xs-7">Goodbye</div>
    </div>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您还必须在内容部分添加container课程。

或者将您的内容部分放入标题包装div。

示例：如果您的标题div包含类<div class="container">...</div>，也可以使用此类包装内容div。

示例1：如果您想要标题和内容的不同部分

<div class="container">
    <div>Header</div>
</div>
<div class="container">
    <div>Your content section</div>
</div>

示例2：如果您不需要分隔标题和内容部分

<div class="container">
    <div>Header</div>
    <div>Your content section</div>
</div>