Высота заполнения карточками flexbox и bootstrap - PullRequest
Новая
       13

Высота заполнения карточками flexbox и bootstrap

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

У меня есть страница с использованием Bootstrap контейнеров и карточек. Я пытаюсь получить .card-body, чтобы заполнить всю высоту экрана, но высота заканчивается после окончания содержимого. Вот скрипка, демонстрирующая проблему. Скрипка 

.page-container {
  min-height: 100vh;
}

.main-content {
  min-height: calc(100vh - 0px);
  -webkit-box-flex: 1;
  flex-grow: 1;
}

.container {
  width: 100%;
}

.card {
  display: flex;
  flex-direction: column;
}

.card-body {
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  background: #ccc;
}
<div class="page-container">
  <div class="main-content">
    <div class="container form-container">
      <div class="card">
        <div class="card-body">
          This should be full height!
        </div>
      </div>
    </div>
  </div>
</div>

1 Ответ

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

Все контейнеры под .main-content не имеют определенной высоты. Так почему бы .card-body быть в полный рост? (Обратите внимание, что в HTML / CSS, большинство элементов по умолчанию height: auto. )

Вы можете либо добавить высоты к вложенным контейнерам, либо добавить display: flex, что будет дать детям полный рост через align-items: stretch по умолчанию . 

.page-container {
  min-height: 100vh;
}

.main-content {
  min-height: calc(100vh - 0px);
  flex-grow: 1;
  display: flex;   /* new */
}

.container {
  flex: 1;         /* new; for width; */
  display: flex;   /* new */

}

.card {
  flex: 1;         /* new */
  display: flex;
  flex-direction: column;
}

.card-body {
  flex: 1 1 auto;
  background: #ccc;
}

body {
  margin: 0;
}
<div class="page-container">
  <div class="main-content">
    <div class="container form-container">
      <div class="card">
        <div class="card-body">
          <b>This is now full height!</b>
        </div>
      </div>
    </div>
  </div>
</div>
...