Css 使其中一个引导行填充视图中剩余的高度并可滚动_Css_Twitter Bootstrap_Bootstrap 4

Css 使其中一个引导行填充视图中剩余的高度并可滚动

css twitter-bootstrap bootstrap-4

Css 使其中一个引导行填充视图中剩余的高度并可滚动,css,twitter-bootstrap,bootstrap-4,Css,Twitter Bootstrap,Bootstrap 4,基本上，我有一个引导容器和两行，一行是标题，另一行是内容。我希望容器具有视口的高度，以便内容可以滚动 <div class="container-fluid overflow-hidden h-100"> <div class="row"> <div class="col"> <h1>Header</h1> </div> </div>

基本上，我有一个引导容器和两行，一行是标题，另一行是内容。我希望容器具有视口的高度，以便内容可以滚动

<div class="container-fluid overflow-hidden h-100">
    <div class="row">
        <div class="col">
            <h1>Header</h1>
        </div>
    </div>
    <div class="row content-area">
        <div class="col">
            <div>Content blah...</div>
        </div>
    </div>
</div>

.content-area {
    max-height: 100%;
    overflow-y: auto;
}


标题
内容空洞。。。
.内容区{
最大高度：100%；
溢出y：自动；
}

max height

将内容呈现为父容器的完整高度，以便将部分内容从视图中截断。我想内容填补容器的其余高度

我试着从bootstrap中选择flex-grow-1，而不是css高度，但没有成功。

在第一行添加vh-100类。它将使视口高度为100%

<div class="container-fluid overflow-hidden h-100">
<div class="row vh-100">
    <div class="col">
        <h1>Header</h1>
    </div>
</div>
<div class="row content-area">
    <div class="col">
        <div>Content blah...</div>
    </div>
</div>


标题
内容空洞。。。

来源：

在第一行添加vh-100等级。它将使视口高度为100%

<div class="container-fluid overflow-hidden h-100">
<div class="row vh-100">
    <div class="col">
        <h1>Header</h1>
    </div>
</div>
<div class="row content-area">
    <div class="col">
        <div>Content blah...</div>
    </div>
</div>


标题
内容空洞。。。

来源：

制作容器

vh-100 d-flex列

，然后将

flex-grow-1

添加到行中

<div class="container-fluid overflow-hidden vh-100 d-flex flex-column">
    <div class="row">
        <div class="col">
            <h1>Header</h1>
        </div>
    </div>
    <div class="row content-area bg-info flex-grow-1">
        <div class="col">
            <h1>Content blah... </h1>
            ...
        </div>
    </div>
</div>


标题
内容空洞。。。
...

演示：