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

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 and/or flex-grow、flex-shrink 调整为 stretch/downsize。这进一步简化了结构。

祝你好运！

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

Why is the background not showing up for the entire section

html

css

frontend

web-frontend

bootstrap-4