Flex 终于让编写全屏设计变得容易了。如果没有 (Twitter-)Bootstrap，只需几行就可以很容易地拥有固定的标题(导航栏)和全屏 DIV
html, body {
width: 100%; height: 100%; margin: 0;
}
.vbox {
display: flex; flex-direction: column;
}
.header, .fullscreen {
padding: 0.25em; margin: 0.25em;
border: 10px solid #ccc; border-radius: 0.5em;
}
.header {
height: 50px;
}
.fullscreen
{
flex: 1;
}<body class="vbox">
<div class="header">Fixed-height header</div>
<div class="fullscreen">fullscreen DIV</div>
</body>尝试对 (Twitter-)Bootstrap 4 做同样的事情
html, body {
width: 100%; height: 100%; margin: 0;
}
.vbox {
display: flex; flex-direction: column;
}
.container-fluid {
border: 10px solid #ccc; border-radius: 0.5em;
flex: 1;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body class="vbox">
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container-fluid">
fullscreen
</div>
</body>不太行得通。 container-fluid 的边界侵入了整个框架。 DIV 如何占据导航栏之后剩余部分的 100%？
最佳答案
事实证明，导航栏是 position:fixed，这意味着它脱离了页面的常规流程。要让 container-fluid 从重叠条下方显示出来，请尝试在 container-fluid 上设置“margin-top:40px” – Thomas Skubicki 1 月 11 日 19:34
试试这个 fiddle ？ jsfiddle.net/chdzevjn
是的，硬值绝对不是最优的。一种方法可能是使用 em 值的 CSS3 或 SASS 变量。主要思想是将流入的 div 从固定导航栏下移出。
关于html - Twitter-Bootstrap4 : Make a DIV occupy height (100% - navbar)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54137626/