html - 100% 宽度部分内的最后一列背景颜色

Question

我正在构建网站，我想访问我的 psd 上的部分(附有 img):

您可以看到该部分有 100% 宽度部分和 .col-md-9 和 .col-md-3。但是当 .col-md-3 结束时，它的背景应该继续并铺平主要部分的背景。

如何让专栏的背景继续？我花了几个小时解决这个问题，但我没有找到正确的方法。谢谢!

.single__content {
    width: 100%;
    max-width: 743px;
    padding-top: 57px;
}
.single__content p {
    color: #707070;
    font-size: 15px;
    font-weight: 400;
    line-height: 23px;
}
.single__meta {
    background: #3c73ba;
    height: 70px;
}
.single__meta h2 {
    font-size: 38px;
    font-weight: 300;
    line-height: 42px;
    color: #fff;
    margin: 0;
    padding-top: 14px;
}
.col-sidebar {
    background: #4285db;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<div class="single__meta">
    <div class="container">
        <div class="row ">
          <div class="col-md-9">
              <h2 class="page-title">Lorem ipsum dolor</h2>
          </div>
          <div class="col-sidebar col-md-3">
              Second column content
          </div>
        </div>
    </div>
</div>

Answer 1

您可以使用 background: linear-gradient 拆分顶部的背景。

Demo with bootstrap 4

.top-bar {
    background: linear-gradient(
    to right, 
    #3c73ba 0%, 
    #3c73ba 50%, 
    #4285db 50%, 
    #4285db 100%
  );
    width: 100%;
    padding: 0;
    margin: 0;
    color: #fff;
}
.col-left{
    background: #3c73ba;
}
.col-right {
    background: #4285db;
}

<div class="top-bar" style="padding: 0">
    <div class="container">
        <div class="row">
          <div class="col-left col-md-9">
              <h2>left</h2>
          </div>
          <div class="col-right col-md-3">
              <h2>right</h2>
          </div>
        </div>
    </div>
</div>