Как заставить ряд растянуть оставшуюся высоту

Я пытаюсь растянуть container-fluid и 2nd row до оставшейся высоты, но я не смог найти способ сделать это.

Я попытался установить align-items/align-self на stretch, но не работал.

Ниже приведена моя структура кода:

<div class="container-fluid"> <!-- I want this container to stretch to the height of the parent -->
    <div class="row">
        <div class="col">
            <h5>Header</h5>
        </div>
    </div>
    <div class="row"> <!-- I want this row height to filled the remaining height -->
        <widgets [widgets]="widgets" class="hing"></widgets>
        <div class="col portlet-container portlet-dropzone"> <!-- if row is not the right to stretch the remaining height, this column also fine -->
            <template row-host></template>
        </div>
    </div>
</div>

Я использую Bootstrap 4 A6. Может ли кто-нибудь предложить мне, как сделать контейнер и строку растянуть оставшуюся высоту?

Ответы

Ответ 1

Bootstrap 4.1.0 имеет вспомогательный класс для flex-grow который вам нужен, чтобы строка заполнила оставшуюся высоту. Вы можете добавить собственный класс "fill" для этого. Вы также должны убедиться, что контейнер на всю высоту.

Имя класса в Bootstrap 4.1 - flex-grow-1

<style>
html,body{
    height:100%;
}

.flex-fill {
    flex:1;
}
</style>

<div class="container-fluid d-flex h-100 flex-column">
    <!-- I want this container to stretch to the height of the parent -->
    <div class="row">
        <div class="col">
            <h5>Header</h5>
        </div>
    </div>
    <div class="row bg-light flex-fill d-flex justify-content-start">
        <!-- I want this row height to filled the remaining height -->
        <div class="col portlet-container portlet-dropzone">
            <!-- if row is not the right to stretch the remaining height, this column also fine -->
            Content
        </div>
    </div>
</div>

https://www.codeply.com/go/kIivt8N1rn

Связанный: Bootstrap 4 делает родительский элемент для заполнения вложенных строк, созданный для заполнения высоты области просмотра с помощью flex-grow