Почему фон не отображается для всего раздела - PullRequest
Новая
       59

Почему фон не отображается для всего раздела

1 голос
/ 12 апреля 2020

Я пытаюсь выяснить, почему мой серый фон не отображается для всего раздела. У меня есть все, что встроено в раздел с идентификатором в середине раздела. В 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;
}

1 Ответ

0 голосов
/ 12 апреля 2020

При использовании системы сетки, структура устанавливается для вашей ширины. Добавление компонентов в сетку, будет генерировать высоту. Создание .card позиционированного абсолюта приведет к падению высоты. Поэтому ваш фоновый цвет не будет виден или, возможно, только для добавленного отступа, поскольку отступ также генерирует высоту. 

.card { position: relative; }

Также полезно знать, что с Bootstrap 4 введен flex-box и ваша структура теперь будет генерировать одинаковую высоту для всех столбцов в одной строке. Раньше это покрывалось вычислением равной высоты в прошлом, но теперь устарело. 

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

Еще лучше, с Bootstrap колодой карт вам больше не нужны столбцы. Просто настройте flex-basis в медиа-запросе и / или flex-grow, flex-shrink, если вам нужно их растянуть / уменьшить. Это еще больше упрощает структуру.

Удачи!

...