我有一个带有 bootstrap 的布局,其中有 3 行包裹在 flex col 中,如下所示:
<div class="row" style="height:100vh;">
<div class="col d-flex flex-column">
<div class="row">...</div>
<div class="row flex-grow-1">
<table>
...many rows...
</table>
</div>
<div class="row">...</div>
</div>
</div>
flex col 中的第一行将在上,第二行将使用之间的所有空间,第三行将在底部。在第二行,我想放一个有很多行的表格,并将表格包含在里面,做成一个“窗口”之类的东西来查看表格的内容,滚动表格。
但是,第二个 div 随表格内容增长,我尝试将表格包裹在一个 div 中并将 max-height 设置为 100%,但 flex 行总是因表格内容而增长。
¿如何使 flex 行在其表内滚动,但占用其父级固定高度的最大可用空间?
最佳答案
它应该像这样使用 max-height
和 overflow-auto
...
<div class="row">
<div class="col d-flex flex-column vh-100" style="max-height: 100vh">
<div class="row">
top row
</div>
<div class="row flex-grow-1 overflow-auto">
<div class="col">
<table>
<tbody>
<tr>
<td>table row</td>
</tr>
..
</tbody>
</table>
</div>
</div>
<div class="row">bottom row</div>
</div>
</div>
https://www.codeply.com/go/v6AH817CoZ
相关:Bootstrap 4: Scrollable row, which fills remaining height
关于css - 如何滚动 flex-grow-1 的 flex 行的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57930638/