为什么整个部分的背景都没有显示

Question

我想弄清楚为什么我的灰色背景没有出现在整个部分中。我将所有内容都嵌入到中间部分的 id 部分中。我在 css 中将中间部分的背景颜色设为灰色，但它没有显示在整个屏幕上。如何让背景颜色显示整个屏幕？

<section id="mid-section">
<div class="pic">
  <img class="pic-image" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/bbq-party-grilled-sausages-1561576780.jpg?crop=1.00xw:0.753xh;0,0.0562xh&resize=1200:*" alt="bbq">
</div>
<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-6">
      <div class="card mb-4 box-shadow">
        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]"
          src="https://images.unsplash.com/photo-1551782450-17144efb9c50?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" data-holder-rendered="true">
        <div class="card-body">
          <h5 class="card-title">Best Burgers</h5>
          <p class="card-text">Aliquam erat volutpat. Cras vulputate laoreet metus non blandit. Sed pretium in arcu ac sollicitudin. Quisque at erat metus. Vivamus id viverra nunc, ac convallis dui. Curabitur lobortis purus sit amet egestas
            egestas. Donec quam nunc, pretium id nibh interdum, malesuada condimentum est. Quisque sed scelerisque mi.</p>
          <div class="d-flex justify-content-between align-items-center">
            <small class="text-muted"></small>
          </div>
        </div>
      </div>
    </div>


    <div class="col-lg-4 col-md-6">
      <div class="card mb-4 box-shadow">
        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]"
          src="https://images.unsplash.com/photo-1551782450-17144efb9c50?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" data-holder-rendered="true">
        <div class="card-body">
          <h5 class="card-title">Best Burgers</h5>
          <p class="card-text">Aliquam erat volutpat. Cras vulputate laoreet metus non blandit. Sed pretium in arcu ac sollicitudin. Quisque at erat metus. Vivamus id viverra nunc, ac convallis dui. Curabitur lobortis purus sit amet egestas
            egestas. Donec quam nunc, pretium id nibh interdum, malesuada condimentum est. Quisque sed scelerisque mi.</p>
          <div class="d-flex justify-content-between align-items-center">
            <small class="text-muted"></small>
          </div>
        </div>
      </div>
    </div>


    <div class="col-lg-4 col-md-6">
      <div class="card mb-4 box-shadow">
        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]"
          src="https://images.unsplash.com/photo-1551782450-17144efb9c50?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" data-holder-rendered="true">
        <div class="card-body">
          <h5 class="card-title">Best Burgers</h5>
          <p class="card-text">Aliquam erat volutpat. Cras vulputate laoreet metus non blandit. Sed pretium in arcu ac sollicitudin. Quisque at erat metus. Vivamus id viverra nunc, ac convallis dui. Curabitur lobortis purus sit amet egestas
            egestas. Donec quam nunc, pretium id nibh interdum, malesuada condimentum est. Quisque sed scelerisque mi.</p>
          <div class="d-flex justify-content-between align-items-center">
            <small class="text-muted"></small>
          </div>
        </div>
      </div>
    </div>
  </div>

.card {
position: absolute;
z-index: 1;
}

.card-img-top {
height: 225px;
width: 100%;
display: block;
}


#mid-section {
background-color: #DCDCDC;
}

.pic-image {
display: block;
margin-left: auto;
margin-right: auto;
width: 85%;
padding-top: 350px;
position: relative;
}

.container {
padding: 50px;
}

Answer 1

使用网格系统时，会根据您的宽度设置结构。将组件添加到网格中，将生成高度。使.card 定位绝对会折叠高度。因此，您的背景颜色将不可见，或者可能仅对添加的填充可见，因为填充也会生成高度。

.card { position: relative; }

另外很高兴知道，在 Bootstrap 4 中，引入了 flex-box，您的结构现在将在单行内的所有列中生成相同的高度。这在过去被等高计算覆盖，但现在已经过时了。

.card { height: 100% } /*is your equal height*/

更好的是，使用 Bootstrap 卡片组，您不再需要列。只需调整媒体查询中的flex-basis 和/或flex-grow，flex-shrink，如果您需要它们来拉伸/缩小。这进一步简化了结构。

祝你好运！