如何使行拉伸剩余高度

Posted 2023-03-07

【中文标题】如何使行拉伸剩余高度

【英文标题】：How to make the row stretch remaining height

【发布时间】：2017-06-30 21:32:06

【问题描述】：

我正在尝试让container-fluid 和第二个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 的实用程序类，它是行填充剩余高度所需的。您可以为此添加自定义“填充”类。您还必须确保容器是全高的。

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/p/gfitG8PkNE

相关：Bootstrap 4 make nested row fill parent that has been made to fill viewport height using flex-grow

【讨论】：

只是一个问题，为什么我们需要align-items-stretch align-content-stretch 两者都在这里？

其实都不需要