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

我不希望我的页面允许任何大于屏幕尺寸的溢出。我将有一个由两行组成的容器。（红色和绿色波纹管）。我希望顶行（红色）根据其中的内容调整大小。然后我希望底行（绿色）自动填充剩余空间。我不希望它扩展到初始容器之外，也不希望它暂时滚动。

执行此操作需要哪些类/css/flexbox 属性？