我有一个使用bootstrap 4的角度应用程序。我有一个粘贴到顶部的导航栏，我想添加填充浏览器中剩余空间的内容。除了顶部的导航栏，我有另一个div本身包含页眉和页脚内容。在页眉和页脚之间，我有一个主内容部分，我希望该部分(下面的例子中的#two)填充所有空白区域。
我以为我可以使用css flexBox来实现这一点，但是当我进入bootstrap世界时，我的简单非引导flexBox示例似乎什么也没做。我正在使用these docs试图解决这个问题。
我认为使用align-self-stretch应该有助于实现这个目标，但它看起来像包含元素可能正在调整自己的大小足以保存我的#outer内容，所以没有扩展FlexBox要完成。我天真地尝试添加高度：100％样式到包含div只是为了尝试拉伸，但这似乎没有帮助。
我根据@ ZimSystem的回复创建了这个plunker example。他的代码示例似乎完全按照我的意愿工作，但当我尝试将更改分成我的简单角度代码时，灵活拉伸没有发生。我不知道我在转换中打破它的目的是什么。
这是我目前正在查看的整个角度分量：
<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>
这是显示导航栏和注入点的应用程序容器：
<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作为内容页眉和页脚固定在内容区域的顶部和底部？
解决方法
更新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>
