相关疑难解决方法(0)

我试图让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 …

我必须创建一个布局，其中内容网格必须位于剩余的整个页面上，但是该布局还具有一个导航栏。

为此，我决定将导航栏放置在flex容器中，并将内容放置在高度为100％的行中。我需要内容来填充剩余的剩余空间。菜单是动态的，所以我不知道导航栏的高度。

但是，在较小的屏幕上，导航栏无法正确调整大小。如果展开菜单，则菜单将覆盖内容。

<div class="container-fluid h-100 d-flex flex-column">

  <nav class="navbar navbar-expand-sm s-navbar">
     ...
  </nav>
  <div class="row h-100">
     ...// content presented here
  </div>
</div>

您可以在这里https://jsfiddle.net/ej9fd368/8/看到， 由于黄色内容，最后一个菜单项被剪切了。

我的要求是内容应填充页面的其余部分。