使用 Flexbox 使 3 个 div 适合窗口高度
如何使 3 个独立的 div 拉伸到屏幕的高度而不发生溢出？
我正在使用 bootstrap 和 flexbox，但每当我将行的高度设置为 100% 时，就会出现溢出。
我希望“内容”（黄色区域）填充页面的大部分，而页眉（浅绿色区域）和页脚（粉色区域）仅占用 100 像素。
我尝试过使用 Flex-Grow 和 Stretch，但没有效果。
预先感谢您提供任何有用的意见。
https://jsfiddle.net/7xtybdrm/1/
CSS：
body {padding-top: 51px;}
html, body {
background-color: rgb(48, 48, 48);
height: 100%;
}
.body-container {
height: 100%;
display: flex;
flex-direction: column;
}
.ribbon-container {
background-color:aqua;
height: 100px;
flex: 1;
}
.content-container {
background-color: yellow;
display: flex;
flex: 2;
}
.footer-container {
height: 50px;
background-color: pink;
display: flex;
flex: 1;
}
HTML：
<head runat="server">
<title></title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">asdfasdf.com</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-center">
<li><a href="../Default.aspx">Home</a></li>
<li><a href="../Pages/About.aspx">About</a></li>
<li class="active"><a href="../Pages/Applications.aspx">Applications</a></li>
</ul>
</div>
</div>
</nav>
<div class="conatiner-fluid body-container col-lg-12">
<div class="row">
<div class="container-fluid ribbon-container">
Ribbon
</div>
<div class="content-container">
Content
</div>
<div class="footer-container">
Footer
</div>
</div>
</div>
</body>
由于 Bootstrap 中的默认类，您遇到了困难.row。
为此类设置一个覆盖，使其成为一个弹性元素而不是一个块元素，这样您就处于良好状态了！
现在，当我们添加overflow: auto到内容容器时，页眉和页脚保持不变，而内容区域滚动。
另外，我推荐 Flex 元素的简写：
flex: 0 0 100px意味着该元素的高度固定为 100px（或宽度...取决于您的flex-direction），并且不会拉伸或收缩。
flex: 1只是意味着该元素将在各个方向上拉伸和收缩。
为了更明显地看出页眉和页脚是固定大小的，我将它们设置为flex: 0 0 50px，所以在复制代码时只需将其更改为 100px 即可！
https://jsfiddle.net/7xtybdrm/4/
