html - 溢出自动没有使 div 可滚动引导
问题描述
我有两个 div 包裹在一个 div 中,第一个 div 包含一个表格,第二个包含按钮。我想让表格可滚动的 div 所以我在那个 div 上使用了 overflow-auto 并且它不起作用我认为问题可能出在另一个使用 flex-frow-1 的父 div 但这里无法弄清楚是我的代码:
<div class="vh-100 d-flex flex-column">
<div class="d-flex flex-column col-12 col-xl-5 col-lg-5 col-md-5 h-100 bg-primary">
<fieldset class="border border-2 border-bottom-0 rounded-top">
<legend class="w-auto px-2 float-none mb-0 fs-5 text-start">
label
</legend>
</fieldset>
<div class="flex-grow-1 border border-2 border-top-0 rounded-bottom">
<div class="rounded overflow-auto h-92">
<table
class="table table-hover text-center rounded p-0 m-0 overflow-auto"
>
<thead class="bg-primary text-white">
<tr>
<th class="fw-bold">name</th>
<th class="fw-bold">age</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>marwan</td>
<td class="text-danger">22</td>
</tr>
<tr class="">
<td>marwan</td>
<td class="text-danger">22</td>
</tr>
<tr class="">
<td>marwan</td>
<td class="text-danger">22</td>
</tr>
<tr class="">
<td>marwan</td>
<td class="text-danger">22</td>
</tr>
<tr class="">
<td>marwan</td>
<td class="text-danger">22</td>
</tr>
<tr class="">
<td>marwan</td>
<td class="text-danger">22</td>
</tr>
<tr class="">
<td>marwan</td>
<td class="text-danger">22</td>
</tr>
<tr class="">
<td>marwan</td>
<td class="text-danger">22</td>
</tr>
<tr class="">
<td>marwan</td>
<td class="text-danger">22</td>
</tr>
<tr class="">
<td>marwan</td>
<td class="text-danger">22</td>
</tr>
</tbody>
</table>
</div>
<div class="col-8 d-flex justify-content-around mt-2">
<button class="py-1 px-0 btn primary-button col-5">button1</button
><button class="py-1 px-0 btn primary-button col-5">button 2</button>
</div>
</div>
</div>
</div>
我想要实现的是:有一个具有特定高度的 div 让我们说 90vh 里面有一个 div 占 90vh div 的 100%,里面有 2 个 div 第一个高度是 100% div 的 90%当其中的项目溢出时,它通过使 div 可滚动来处理这个问题,而另一个则采用剩余的高度
解决方案
使用boatstrap v4(v4.5.2 工作 100%)
并给高度小于表格容器的内容高度(带有溢出自动的div)
推荐阅读
- c# - C++ 中的结构体大小 & 转换为 C#
- haskell - 是否可以在 QuickCheck 中生成任意函数
- python - 如何按目录文件名中的数字对文件进行排序?
- javascript - Javascript粒子动画背景
- c# - IEnumerable 上的类似正则表达式的模式匹配
而不是 C# 中的字符串字符 - clickonce - 无需重新编译代码即可更改 clickonce 应用程序上的连接字符串
- kubernetes - Kubernetes Dashboard v1.8.3 部署
- c# - 如何将 NAudio 添加到我的项目中?
- mysql - MySQL:如何添加 IF EXISTS 然后 UPDATE Else INSERT?
- java - jni: c to java char* 缓冲区数据以通用格式传递