如何在flex-grow容器中创建响应式表格而不影响整体布局？
问题描述 投票：0回答：2
我正在使用 Bootstrap 5.3 开发响应式布局，其中包括导航栏、侧边栏、内容面板和状态栏。该应用程序应始终为 100% 视图高度和视图宽度，并包含所有信息 无需获取页面滚动条！
ContentPanel 包含顶部的一个元素、一个具有动态值的表格和底部的一个元素。我希望表格尽可能高，而不会将其下方的元素和状态栏推到视口之外！
当我只有几行时，看起来不错，这里是一个例子：
当表格有很多行时，我的问题就出现了：表格将下面的元素和状态栏推出视口，整个页面变成垂直滚动条！这是一个例子：
当表格的内容超出 ContentPanel 的大小时，我希望在 ContentPanel 内的表格中出现一个滚动条，这样您就可以滚动表格行，而不会看不到 StatusBar。在渲染其他元素后，表格应占据 ContentPanel 的剩余高度。 到目前为止，只有当我在桌子上设置最大高度时，我才能完成这项工作，但是它变得不那么敏感，请参见此处：
[
2个回答
0
投票
投票
height，你就可以实现这一点，我想它的接触变化不会像内容面板那样变化。然后，将
max-height: calc(100vh - 25px);overflow-y: auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet" />
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
.status {
height: 25px;
}
.content {
max-height: calc(100vh - 25px);
display: flex;
flex-direction: column;
}
.scrollable-table {
overflow-y: auto;
}
</style>
</head>
<body class="m-0 p-0 border-0 bd-example bd-example-flex">
<div class="vh-100 d-flex flex-column">
<div class="d-flex flex-grow-1">
<nav class="border p-2">NavBar</nav>
<aside class="border p-2">SideBar</aside>
<div class="border p-2 flex-grow-1 content">
ContentPanel
<div class="above-table">Element above table</div>
<div class="scrollable-table">
<table class="table" class="table-responsive">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">10</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">11</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">12</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">13</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">14</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">15</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">16</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">17</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">18</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">19</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">20</th>
<td>Larry</td>
<td>The Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">20</th>
<td>Larry</td>
<td>The Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">20</th>
<td>Larry</td>
<td>The Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">20</th>
<td>Larry</td>
<td>The Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">20</th>
<td>Larry</td>
<td>The Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">20</th>
<td>Larry</td>
<td>The Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">20</th>
<td>Larry</td>
<td>The Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">20</th>
<td>Larry</td>
<td>The Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">20</th>
<td>Larry</td>
<td>The Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">20</th>
<td>Larry</td>
<td>The Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">20</th>
<td>Larry</td>
<td>The Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">20</th>
<td>Larry</td>
<td>The Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="below-table">Element below table</div>
</div>
</div>
<div class="border status">StatusBar</div>
</div>
</body>
</html>
0
投票
投票
height: 100vh类将
<div>vh-100min-height: 0应用于各种内部元素，以覆盖由于垂直弹性布局而默认应用的
min-height: min-contentmax-height: 100%应用
mh-100ContentPanel
<div> 提供其父元素的高度约束，以便内部 .scrollable-table
.scrollable-table {
overflow-y: auto;
}
.min-h-0 {
min-height: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
rel="stylesheet"
/>
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="m-0 p-0 border-0 bd-example bd-example-flex">
<div class="vh-100 d-flex flex-column vh-100">
<div class="d-flex flex-grow-1 min-h-0">
<nav class="border p-2">NavBar</nav>
<aside class="border p-2">SideBar</aside>
<div class="border p-2 flex-grow-1 d-flex flex-column min-h-0 mh-100">
ContentPanel
<div>Element above table</div>
<div class="scrollable-table min-h-0">
<table class="table" class="table-responsive">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">10</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">11</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">12</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">13</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">14</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">15</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">16</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">17</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">18</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">19</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">20</th>
<td>Larry</td>
<td>The Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div>Element below table</div>
</div>
</div>
<div class="border">StatusBar</div>
</div>
</body>
</html>
最新问题
- 系统音量变化观察器在 iOS 15 上不起作用
- 如何根据加起来等于条形总长度的两个变量为两色调条形图着色？
- 当 vite build 在生产环境中反应时，无法分配给对象“#<Object>”的只读属性“_status”
- Instagram 嵌入不显示内容，仅“在 Instagram 中查看此帖子”
- java中kafka主题的对象序列化错误
- 使用简单变量和函数的奇怪行为
- 我的函数不起作用，我不明白为什么..在C中
- Databricks - 无法创建表关联位置不为空且也不是 Delta 表
- 如何在命令行上替换 Helm value.yaml 中数组项中的特定属性值而不是整个数组/映射？
- 仪表功能和计数器功能
- 雪花响应 Json 有空格？
- 在 wsl 中使用多进程时名称解析暂时失败
- 无法在 Azure 静态 Web 应用程序中部署我的 React 应用程序。 Github 操作抛出此日志：
- 错误：从 GitHub 克隆存储库时“仍需要 1824 字节的正文”
- 计算战列舰沉没船只/船只的问题（Java）
- 使用 SweetAlert 或 SweetAlert2
- Excel TEXT 函数在存在“*”时不填充单元格
- 为什么来自 beautifulsoup4 的 get_text() 没有提取任何内容？
- 如何使用 TypeScript 和 React-hook-form 在 Next.js 14 中创建通用表单组件？
- 如何在三个不同的div元素上设置ref，然后访问这些元素的数组？
© www.soinside.com 2019 - 2024. All rights reserved.