我正在尝试创建一个全屏布局，占用 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>
我可以让它仅使用一列，但添加多于一列会以我不理解的方式破坏布局。
我的主标记（<main role="main" class="container">）中有3列。第一列有一个包含许多行的表。我希望该列可垂直滚动，同时在页眉和页脚之间保持拉伸状态。我在css中添加了：
#please-scroll{
height: calc(100% - 110px); overflow-y: scroll
}
但这是行不通的。
这是我的代码：
#please-scroll{
height: calc(100% - 110px); overflow-y: scroll
}
html {
height: 100%;
font-family: sans-serif;
background: #1F1F1F !important; }
body {
font-family: sans-serif;
background-color: #1F1F1F;
height: 100%; }
.container {
min-height: calc(100% - 110px) !important;
margin: 0 auto -33px;
width: 100%; }
body > .container {
padding: 60px 15px 0; }
.nav-item .nav-link span {
border-radius: 10px;
border: 2px solid;
padding: 3px;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: …