相关疑难解决方法(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 …

这可能是一个非常简单的问题,但我已经离开CSS场景一段时间了,我似乎无法弄明白.我正在使用Bootstrap框架,我有一个固定的页眉和页脚.其间的容器包括导航栏和内容区域.我希望该容器填充页眉和页脚之间的整个空间(100%高度).

这是项目的jsFiddle:http://jsfiddle.net/NyXkt/2/

这是当前的html结构:

<div id="wrapper">
    <!-- Header -->
    <div class="container-fluid no-padding header">
        <div class="row-fluid fill-height">
            <!-- Header Left -->
            <div class="span2">
                <p class="center-text">Left</p>
            </div>
            <!-- Header Middle -->
            <div class="span8">
                <p class="center-text">Middle</p>
            </div>
            <!-- Header Right -->
            <div class="span2">
                <p class="center-text">Right</p>
            </div>
        </div>
    </div>
    <!-- Content Wrapper -->
    <div class="container-fluid no-padding fill">
        <div class="row-fluid">
            <div class="span2">
                <div class="well sidebar-nav-fixed no-padding">
                    <ul id="nav">
                        <li><a href="#">Item 1</a>

                            <ul>
                                <li><a href="#">Sub-Item 1 a</a>
                                </li>
                                <li><a href="#">Sub-Item 1 b</a>
                                </li>
                                <li><a …

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

为此，我决定将导航栏放置在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/看到， 由于黄色内容，最后一个菜单项被剪切了。

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