vob*_*bet 5 css flexbox twitter-bootstrap bootstrap-4
我正在尝试创建一个全屏布局，占用 100% 的视口，并带有粘性页眉和页脚，并在主要内容区域中单独滚动列。
我已经尝试在各个行和列上使用 .h-100 和 .flex-grow-1 但我无法完全让它工作。我最接近的是将 h-100 添加到容器和中间行，但这会将页脚推离屏幕底部。
<body>
<div class="container-fluid h-100">
<div class="row">
<div class="col-12 border">Navbar </div>
</div>
<div class="row">
<div class="col-2 border" style="overflow-y: scroll;">Sidebar </div>
<div class="col-4 border" style="overflow-y: scroll;">Article list </div>
<div class="col-6 border" style="overflow-y: scroll;">Article content </div>
</div>
<div class="row">
<div class="col-12 border">Footer </div>
</div>
</div>
</body>
我可以让它仅使用一列，但添加多于一列会以我不理解的方式破坏布局。
制作容器d-flex，然后使用flex-grow-1使内容区域填充高度。您还需要flex-shrink-0在导航栏和页脚上使用，这样它们就不会“挤压”高度。
<div class="container-fluid h-100 d-flex flex-column">
<div class="row flex-shrink-0">
<div class="col-12 border">Navbar </div>
</div>
<div class="row flex-grow-1">
<div class="col-2 border" style="overflow-y: scroll;">Sidebar </div>
<div class="col-4 border" style="overflow-y: scroll;">
Article list
</div>
<div class="col-6 border" style="overflow-y: scroll;">Article content </div>
</div>
<div class="row flex-shrink-0">
<div class="col-12 border">Footer </div>
</div>
</div>
演示： https: //www.codeply.com/go/ouc3hddx5i
相关：
使用 Bootstrap 4 的剩余垂直空间
Bootstrap 4.0 - 带有图像 + 导航栏 + 全高正文的响应式标题