如何在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>
最新问题
- 如何在Android Kotlin中每5秒致电API？
- Sci-kit学习：研究错误分类的数据
- 如何从C＃中的QueryPerformancecount
- 不能将ApplicationSights的度量添加到Azure
- 我如何禁用，在键入点（。）视觉工作室后会自动打印fileStyleUriparSer？ 不要误会我的意思，我想要这些建议，但我不希望Visual Studio自动
- 我有一个vba excel模型，我将其分为两个单独的工作簿： 包含模型的所有输入的InputswB， RunnerWB，其中包含大部分VBA代码（以及所有
- 在bash中``读''的目的是什么？您如何使用它？
- 如何在C＃中为帐户中创建持久字典？
- 如何从另一个数组的值中生成一个随机数组，其值的总和在预定的范围内？ 我有一系列正整数，例如[10,25,40,55,80,110]。 我想能够指定一个范围，例如100-150，并从此预先存在的数组中生成一个新数组，其中新的
- 如何支持更改登录电子邮件与Auth0
- 我正在尝试将JS文件保存在Chrome覆盖文件的指定文件夹中，并且每当我按右键单击然后单击“保存为覆盖”时，该文件就不会保存在文件夹中。 \
- 以下反应组件之间有什么区别？ [重复]
- 我们如何在角度测试httpresource？ 我喜欢Angular的新httpresource，它做了很多我很久以来一直想要的事情。它确实可以使生活更轻松。 但是，我在用茉莉花测试httpresource时遇到麻烦...
- 如何在.NET应用程序中访问GCP Secret Manager，并配置了代理？ 我在Google Cloud Run上托管了一个.NET应用程序，需要访问GCP Secret Manager。我的应用程序可以正常工作，但是当我使用环境变量设置代理时（http ...
- 每个子图旁边的传说，python
- 将GhostPCL与图像转换为PDF
- 我有一个IoT中心和用Python编写的Azure函数应用程序。我希望Azure功能能够触发Hub收到的消息。
- 在运行Django测试之前，加载SQL转储
- 如何在我的React节点项目中添加自定义HLS依赖关系的正确方法？ 我想从https://github.com/video-dev/hls.js修改来源，然后将其添加到我的项目中。 我下载了https://github.com/video-dev/hls.js消息来源，进行了一些更改，并运行了NPM Run Build。 t ...
- 有人可以在MaxScript中解释struct定义内部的结构定义。
© www.soinside.com 2019 - 2025. All rights reserved.