html - 动态表格高度超过页面高度
问题描述
我有一个部分，其中有一个网格，分布如下（或者至少这是我想要得到的）：
现在，在计算网格中，我插入了一个动态表，该表有 6 列，但行数未知，其中基于我加载的 JSON 中的数据量。
我的问题是，如果有很多行，calculation_grid 的高度会发生变化，我不知道为什么（我使用了 height:100% 并且根据我的理解，表格在该父级内部）。
我得到的是：
我想要得到的是（只能通过设置 max-height:750px 来获得它，但我不想使用静态数字，我只想让它填充它的父类，calculation_grid 并且它将被修复）：
我使用的 HTML 是：
<section id="optimizer">
<h1 id="optimizer_title">Test</h1>
<div class="calculation-grid-container">
<div class="current_status_grid">
<h2>Current</h2>
<h3>Level: </h3>
<h3>XP: </h3>
</div>
<div class="goal_grid">
<h2>Enter your goal</h2>
<h3>Level: </h3>
<h3>XP: </h3>
</div>
<div class="calculation_grid">
<ul class="responsive-table">
<li class="table-header">
{% for cell in headings %}
<div class="col"> {{ cell }}</div>
{% endfor %}
</li>
{% for row in data %}
<li class="table-row">
{% for cell in row %}
<div class="col"> {{ cell }}</div>
{% endfor %}
</li>
{% endfor %}
</ul>
</div>
</div>
</section>
CSS：
section {
background-image: url('icons/background_main.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100vh;
opacity: 0.95;
}
section .calculation-grid-container {
display: grid;
width: 90%;
height: 75%;
gap: 10px;
margin-left: 5%;
margin-right: 5%;
}
.current_status_grid {
display: flex;
flex-direction: column;
align-items: center;
justify-content: left;
text-align: left;
background-color: rgba(0, 0, 0, 0.7);
border: 3px solid rgba(255, 254, 5, 0.4);
border-radius: 10px;
color: rgba(255, 254, 5, 0.4);
column-gap: 10px;
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: 1;
height: auto;
width: 100%;
padding: 10px;
}
.goal_grid {
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
border: 3px solid rgba(255, 254, 5, 0.4);
border-radius: 10px;
color: rgba(255, 254, 5, 0.4);
column-gap: 10px;
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 2;
grid-row-end: 2;
height: auto;
width: 100%;
padding: 5px;
}
.calculation_grid {
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
border: 3px solid rgba(255, 254, 5, 0.4);
border-radius: 10px;
color: rgba(255, 254, 5, 0.4);
column-gap: 10px;
display: grid;
grid-column-start: 2;
grid-column-end: 7;
grid-row-start: 1;
grid-row-end: 3;
height: 100%;
width: 100%;
padding: 5px;
}
/**************/
/* DATA TABLE */
/**************/
ul {
padding: 0;
}
.responsive-table {
overflow-y: scroll;
width: 100%;
height: auto;
max-height:750px;
}
.responsive-table li {
border-radius: 8px;
display: grid;
justify-content: space-between;
grid-template-columns: 10fr 10fr 10fr 20fr 20fr 30fr;
justify-items: center;
margin-bottom: 4px;
padding: 10px 20px;
overflow: hidden;
}
.responsive-table .table-header {
background-color: rgba(0, 0, 0, 0.2);
border: 2px solid rgba(255, 254, 5, 0.4);
color: rgba(255, 254, 5, 0.9);
font-size: 1.5rem;
font-weight: bold;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.responsive-table .table-row {
background: rgba(0, 0, 0, 0.9);
border: 2px solid rgba(255, 254, 5, 0.4);
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
color: rgba(255, 254, 5, 0.9);
}
@media all and (max-width: 100%) {
.responsive-table .table-header {
display: none;
}
.responsive-table li {
display: block;
}
.responsive-table .col {
flex-basis: 100%;
display: flex;
padding: 10px 0;
}
}
解决方案
我想这就是你想要的。首先，您可能应该使用表格标签来实现可访问性。在滚动方面，关键是将部分设置为 100vh 的高度（vh 代表视图高度）并在 tbody 上设置溢出（这样您的标题将保持锁定，因此用户不会忘记他们正在寻找的列在）。如果你只是在整个地方做高度 100%，页面会因为内容而不断扩大，这意味着 100% 评估的东西只会越来越大。要获得卷轴，需要在某处至少有一个硬停止。因此，您的部分有 100vh，确保它将占据整个视口高度。
section {
height: 100vh;
}
section .calculation-grid-container {
display: grid;
width: 90%;
height: 75%;
gap: 10px;
margin-left: 5%;
margin-right: 5%;
grid-template-rows: 1fr 1fr;
}
.current_status_grid {
display: flex;
flex-direction: column;
align-items: center;
justify-content: left;
text-align: left;
background-color: rgba(0, 0, 0, 0.7);
border: 3px solid rgba(255, 254, 5, 0.4);
border-radius: 10px;
color: rgba(255, 254, 5, 0.4);
column-gap: 10px;
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: 1;
height: auto;
width: 100%;
padding: 10px;
}
.goal_grid {
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
border: 3px solid rgba(255, 254, 5, 0.4);
border-radius: 10px;
color: rgba(255, 254, 5, 0.4);
column-gap: 10px;
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 2;
grid-row-end: 2;
height: auto;
width: 100%;
padding: 5px;
}
.calculation_grid {
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
border: 3px solid rgba(255, 254, 5, 0.4);
border-radius: 10px;
color: rgba(255, 254, 5, 0.4);
column-gap: 10px;
display: grid;
grid-column-start: 2;
grid-column-end: 7;
grid-row-start: 1;
grid-row-end: 3;
height: 100%;
width: 100%;
padding: 5px;
}
tbody {
overflow: scroll;
height: 100%;
}
/**************/
/* DATA TABLE */
/**************/
ul {
padding: 0;
}
.responsive-table {
/* overflow-y: scroll; */
width: 100%;
/* height: auto; */
/* max-height: 750px; */
}
tbody tr td {
padding: 10px 20px;
}
.responsive-table li {
border-radius: 8px;
display: grid;
justify-content: space-between;
grid-template-columns: 10fr 10fr 10fr 20fr 20fr 30fr;
justify-items: center;
margin-bottom: 4px;
padding: 10px 20px;
overflow: hidden;
}
.responsive-table .table-header {
background-color: rgba(0, 0, 0, 0.2);
border: 2px solid rgba(255, 254, 5, 0.4);
color: rgba(255, 254, 5, 0.9);
font-size: 1.5rem;
font-weight: bold;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.responsive-table .table-row {
background: rgba(0, 0, 0, 0.9);
border: 2px solid rgba(255, 254, 5, 0.4);
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
color: rgba(255, 254, 5, 0.9);
}
@media all and (max-width: 100%) {
.responsive-table .table-header {
display: none;
}
.responsive-table li {
display: block;
}
.responsive-table .col {
flex-basis: 100%;
display: flex;
padding: 10px 0;
}
}<section id="optimizer">
<h1 id="optimizer_title">Test</h1>
<div class="calculation-grid-container">
<div class="current_status_grid">
<h2>Current</h2>
<h3>Level: </h3>
<h3>XP: </h3>
</div>
<div class="goal_grid">
<h2>Enter your goal</h2>
<h3>Level: </h3>
<h3>XP: </h3>
</div>
<table class="calculation_grid">
<thead>
<tr class="responsive-table">
<th class="table-header">
for cell in headings
<div class="col"> cell </div>
</th>
</thead>
<tbody>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
<tr class="table-row">
<td class="col">
hey there
</td>
</tr>
</tbody>
</table>
</d>
</div>
</section>推荐阅读
- pandas - 在 MatPlotLib 中绘制不同时基上的两个并行测量之间的差异
- django - DJANGO - 类 Meta / varibales db_table
- python - 用于收益模拟的 GAN
- angular - 嵌套可观察对象完成时，Angular 10 调用 finalize()
- angular - Angular8：仅允许在创建后 30 分钟内删除项目
- android - 如何根据调查答案创建自定义的“组合”或应用组？
- python - 如何使用以线性代数形式给出的 matplotlib 绘制一条线？
- python - Python 中的 Google 翻译 API
- windows - tensorflow 2.2 gpu 支持 Windows
- bash - while 循环中的 sed 命令不写入输出