css - 如何使用 Bootstrap 4 flexbox 填充可用内容？

Question

我有一个使用 bootstrap 4 的 Angular 应用程序。我有一个固定在顶部的导航栏，我想添加填充浏览器剩余空间的内容。除了顶部的导航栏之外，我还有另一个本身包含页眉和页脚内容的 div。在页眉和页脚之间，我有一个主要内容部分，我希望该部分(在我下面的示例中为 #two)填充所有空白区域。

我以为我可以使用 css flexbox 来完成这个，但是当我进入 bootstrap 世界时，我的简单的非 bootstrap flexbox 示例似乎什么也没做。我用的是 these docs试图弄清楚这一点。

我认为使用 align-self-stretch 应该有助于实现这个目标，但看起来包含元素的大小可能刚好足以容纳我的 #outer content，所以不需要扩展 flexbox。我天真地尝试将 height:100% 样式添加到包含的 div 中，只是为了尝试进行一些拉伸(stretch)，但这似乎没有帮助。

我创建了这个 plunker example基于@ZimSystem 的回应。他的 codeply 示例似乎完全按照我的意愿工作，但是当我尝试将更改拼凑到我的简单 Angular 代码中时， flex 拉伸(stretch)并没有发生。我不确定要在转换中打破它。

这是我目前正在查看的整个 Angular 分量:

<div id="outer" class="d-flex flex-column flex-grow">
    <div id="one" class="">
        header content <br>
        another line <br>
        And another
    </div>
    <div id="two" class="bg-info h-100 flex-grow">
        main content that I want to expand to cover remaining available height
    </div>
    <div id="three" class="">
        footer content
    </div>
</div>

这是显示导航栏和注入(inject)点的应用程序容器:

<div class="d-flex flex-column h-100">
    <nav class="navbar navbar-toggleable-md sticky-top bg-faded">
        <a class="navbar-brand" href="#">
            <h1 class="navbar-brand mb-0">My App</h1>
        </a>
        <ul class="navbar-nav"> 
            <li class="nav-item"><a class="nav-link" routerLink="/flex">My flex view</a></li>
        </ul>
    </nav>
    <router-outlet></router-outlet>
</div>  

如何让我的 #two div 扩展以填充空间，同时让我的 #one 和 #three div 作为内容页眉和页脚锚定到内容区域的顶部和底部？

Answer 1

更新 Bootstrap 4.1.0

flex-grow-1 和 flex-fill 类包含在 Bootstrap 4.1.0 中

更新 Bootstrap 4.0.0

像这样添加一个 flex-grow 类:

.flex-grow {
    flex: 1 0 auto;
}

然后，utility classes可用于布局的其余部分:

 <div class="d-flex flex-column h-100">
    <nav class="navbar navbar-toggleable-md sticky-top bg-faded">
        <a class="navbar-brand" href="#">
            <h1 class="navbar-brand mb-0">My App</h1>
        </a>
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link">Item 1</a></li>
        </ul>
    </nav>
    <div id="outer" class="d-flex flex-column flex-grow">
        <div id="one" class="">
            header content
            <br> another line
            <br> And another
        </div>
        <div id="two" class="bg-info h-100 flex-grow">
            main content that I want to expand to cover remaining available height
        </div>
        <div id="three" class="">
            footer content 40px height
        </div>
    </div>
</div>

https://www.codeply.com/go/3ZDkRAghGU

这是在 Bootstrap 4.3.1 上的另一个例子，它有一个导航栏、侧边栏和带有滚动内容区域的页脚: https://www.codeply.com/go/LIaOWljJm8