如何使用Bootstrap 4 flexbox填充可用的内容？
我有一个使用bootstrap 4的angular应用程序，我有一个固定在顶部的导航栏，我想在浏览器中添加填充剩余空间的内容。除了顶部的导航栏之外，我还有另一个div，它本身包含页眉和页脚内容。在页眉和页脚之间，我有一个主要内容部分，我希望该部分(下面示例中的#two)填充所有空白。
我认为我可以使用css flexbox来实现这一点，但是当我进入bootstrap世界时，我的简单的非bootstrap flexbox示例似乎什么也做不到。我正在使用these docs来尝试解决这个问题。
我认为使用align-self-stretch应该有助于实现这一目标，但它看起来像是包含元素的大小刚好足以容纳我的#outer内容，所以不需要进行flexbox扩展。我天真地尝试将height:100%样式添加到包含的div中，只是为了得到一些拉伸，但这似乎没有帮助。
我根据@ this系统的响应创建了这个plunker example。他的codeply示例似乎完全按照我的期望工作，但当我尝试将这些更改拼凑到我的简单角度代码中时，flex拉伸并没有发生。我不确定我该怎么做才能在转换过程中打破它。
这是我目前正在查看的整个角度组件：
<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作为内容页眉和页脚锚定在内容区域的顶部和底部？
回答 4
Stack Overflow用户
发布于 2017-08-16 18:35:38
您的组件被包装到一个<flex>元素中，该元素也需要相同的flexbox样式才能垂直拉伸，从而允许其内容与之一起拉伸。因此，将class="d-flex flex-column flex-grow"添加到<flex>将会起作用。这是your plunker example的一个工作分支。
Stack Overflow用户
发布于 2017-08-16 18:24:55
如果你不能控制你正在使用的类的行为。只需将其全部删除，只使用此css。
html,
body,
flex {
height: 100%;
margin: 0;
}
.outer {
display: flex;
flex-direction: column;
height: 100%;
}
.two {
background-color: #123;
flex-grow: 1;
color: #FFF;
}<flex>
<div class="outer">
<div class="one">
Hey. This is header. <br> Hey. This is header. <br> Hey. This is header. <br> Hey. This is header. <br>
</div>
<div class="two">
Hey. This is body
</div>
<div class="three">
Hey. This is footer <br> Hey. This is footer <br>
</div>
</div>
</flex>
Stack Overflow用户
发布于 2017-08-16 08:04:30
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.flex-grow {
flex: 1;
}添加一个包含内容块的包装器组件，并将flex-grow类应用于要填充剩余空间的包装器组件。
https://stackoverflow.com/questions/45642065
复制相似问题