我正在尝试创建一个全屏布局，占用 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>
我可以让它仅使用一列，但添加多于一列会以我不理解的方式破坏布局。