web-dev-qa-db-ja.com

行を残りの高さに伸ばす方法

container-fluidと2番目の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を使用しています。コンテナと列を作成して残りの高さを伸ばす方法を誰かが私に提案できますか？

twitter-bootstrapbootstrap-4flexbox
22
user3130446

Bootstrap 4.1.0には、flex-growこれは、行が残りの高さを満たすために必要なものです。このためにカスタムの「フィル」クラスを追加できます。また、コンテナが完全な高さであることを確認する必要があります。

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

関連： ブートストラップ4は、flex-growを使用してビューポートの高さを埋めるために作成されたネストされた行を親に埋めます

29
Zim