Html 使用网格布局时保持页眉/页脚位置+；自举&x2B；表溢出
给定以下页面布局，我需要确保页面本身不可滚动（页面高度==100vh），但如果需要，其中的表提供滚动。 页眉和页脚应放在页面的顶部和底部，不受表格内容的影响。也就是说，如果表格内容超出了可用的垂直空间，它就不能向下推动页脚，而是提供适当的滚动 当前布局是一个Html 使用网格布局时保持页眉/页脚位置+；自举&x2B；表溢出,html,css,bootstrap-4,css-grid,Html,Css,Bootstrap 4,Css Grid,给定以下页面布局，我需要确保页面本身不可滚动（页面高度==100vh），但如果需要，其中的表提供滚动。 页眉和页脚应放在页面的顶部和底部，不受表格内容的影响。也就是说，如果表格内容超出了可用的垂直空间，它就不能向下推动页脚，而是提供适当的滚动 当前布局是一个rootdiv，它以一个Bootstrap4navbar开始，然后是一个page\u容器，该容器为其内部页眉，内容，页脚div设置一个网格布局 JSFIDLE的布局包含不超过页面高度的表： 包含超过页面高度的表的布局的JSFIDLE： 如您所
rootnavbarpage\u容器页眉内容页脚网格布局<style type="text/css">
#root {
height: 100%;
min-height: 100vh;
max-height: 100vh;
}
.page_container {
max-height: calc(100vh - 70px);
height: calc(100vh - 70px);
min-height: calc(100vh - 70px);
}
.table_container {
display: grid;
height: 100%;
grid-template-rows: auto 1fr auto;
}
.table_body {
display: block;
height: 100%;
overflow-y: scroll;
}
</style>
#根{
身高：100%；
最小高度：100vh；
最大高度：100vh；
}
.page_容器{
最大高度：计算（100vh-70px）；
高度：计算（100vh-70px）；
最小高度：计算（100vh-70px）；
}
.table_容器{
显示：网格；
身高：100%；
网格模板行：自动1fr自动；
}
.桌体{
显示：块；
身高：100%；
溢出y：滚动；
}
<body>
<div id="root">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"><a class="navbar-brand" href="#">Company</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a id="vehicles_navbar" class="nav-link" href="#">navbar1</a></li>
<li class="nav-item"><a id="vehicles_navbar" class="nav-link" href="#">navbar2</a></li>
<li class="nav-item"><a id="vehicles_navbar" class="nav-link" href="#">navbar3</a></li>
<li class="nav-item"><a id="vehicles_navbar" class="nav-link" href="#">navbar4</a></li>
<li class="nav-item"><a id="vehicles_navbar" class="nav-link" href="#">navbar5</a></li>
<li class="nav-item"><a id="vehicles_navbar" class="nav-link" href="#">navbar6</a></li>
<li class="nav-item"><a id="vehicles_navbar" class="nav-link" href="#">navbar7</a></li>
<li class="nav-item"><a id="vehicles_navbar" class="nav-link" href="#">navbar8</a></li>
</ul>
</div>
</nav>
<div style="padding: 6px;">
<div class="page_container">
<div class="table_container">
<div>
<h1>HEADER</h1>
</div>
<div>
<div>
<table class="table">
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
<th scope="col"> Column 4 </th>
<th scope="col">Column 5</th>
</tr>
</thead>
<tbody class="table_body">
<tr>
<td colspan="5">
<h3>Row</h3>
</td>
</tr>
<tr>
<td colspan="5">
<h3>Row</h3>
</td>
</tr>
<tr>
<td colspan="5">
<h3>Row</h3>
</td>
</tr>
<tr>
<td colspan="5">
<h3>Row</h3>
</td>
</tr>
<!-- more rows...-->
</tbody>
</table>
</div>
</div>
<div>
<h2>Footer</h2>
</div>
</div>
</div>
</div>
</div>
标题
第1栏
第2栏
第3栏
第4栏
第5栏
一行
一行
一行
一行
页脚
div.footer {
position: fixed;
left: 0;
bottom: 0;
}
您不需要CSS网格，只需使用flexbox，就可以将内容
flex:100overflow:auto[root]{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
[第页]{
弹性：1；
显示器：flex；
弯曲方向：立柱；
}
[内容]{
弹性：100；
溢出：自动；
}
/*粘头*/
桌子{
位置：相对位置；
}
th{
位置：粘性；
排名：0；
背景：黑色；
颜色：白色；
}
标题
第1栏
第2栏
第3栏
第4栏
第5栏
一行
一行
一行
一行
一行
一行
一行
一行
一行
一行
一行
一行
一行
一行
一行
一行
一行