twitter-bootstrap Bootstrap 4 Navbar 和内容填充高度 flexbox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49191957/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 Navbar and content fill height flexbox
提问by Dan
I have to create a layout in which a content grid has to be on the full remaining page, but the layout has also a navigation bar.
我必须创建一个布局，其中内容网格必须位于整个剩余页面上，但该布局还有一个导航栏。
In order to do this I decided to place the navigation bar in a flex container and the content in a row with height 100%. I need the content to fill the rest of the remaining space. The menu is dynamic so I can not know how the height of the navigation bar is.
为了做到这一点，我决定将导航栏放在一个 flex 容器中，并将内容排成一行，高度为 100%。我需要内容来填充其余的剩余空间。菜单是动态的，所以我不知道导航栏的高度如何。
However on smaller screens the navigation bar does not resize correctly. If the menu is expanded the menu is overlayed with the content.
但是，在较小的屏幕上，导航栏无法正确调整大小。如果菜单被展开，则菜单将被内容覆盖。
<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>
You can see it here https://jsfiddle.net/ej9fd368/8/that the last menu item is cut because of the yellow content.
您可以在此处 https://jsfiddle.net/ej9fd368/8/看到最后一个菜单项由于黄色内容而被剪切。
My requirement is that the content should fill the rest of the page.
我的要求是内容应该填满页面的其余部分。
回答by Zim
Instead of using h-100on the yellow content area, add an extra CSS class to make it flex-grow:1 in height...
不要h-100在黄色内容区域上使用，而是添加一个额外的 CSS 类，使其高度为 flex-grow:1...
.flex-fill {
flex:1 1 auto;
}
https://www.codeply.com/go/xBAMfbHqbN
https://www.codeply.com/go/xBAMfbHqbN
<div class="container-fluid h-100 d-flex flex-column">
<nav class="navbar navbar-expand-sm s-navbar">
<a class="brand navbar-brand" href="/">Brand</a>
<button class="navbar-toggler s-btn-hamburger order-first s-color-icons" aria-expanded="true" aria-controls="navbar-test" aria-label="Toggle navigation" type="button" data-target="#navbar-test" data-toggle="collapse">
<span class="navbar-toggler-icon k-icon k-icon-md k-i-hamburger"></span>
</button>
<div class="navbar-collapse s-menu-content collapse show" id="navbar-test">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown1" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">Menu Item</a>
<div class="dropdown-menu" aria-labelledby="dropdown1">
<a class="dropdown-item" href="/Device">Sub menu</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/Test">Test</a>
</li>
</ul>
</div>
</nav>
<div class="row flex-fill">
<main class="col" style="background-color: yellow"></main>
</div>
</div>
Note:The flex-fillutility class will be included in the next Bootstrap 4.1 release:
https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9
注：该flex-fill实用程序类将包括在未来引导4.1版本：
https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9
Related question: Bootstrap 4: How to make the row stretch remaining height?
