html - tbody 上没有固定高度的动态 tbody 滚动
问题描述
我一直在为这个问题头疼。
我有一个 div 布局,其中某些 div 可以折叠或显示。在这些 div 下方是一个带有表格的 div。我想要的是当内容不再适合页面时,tbody 变得可滚动。我不能给 tbody 一个固定的高度(我在示例中做了什么来显示我想要的滚动)。表格应根据可用高度进行调整,并且 tbody 在不适合时应可滚动,以防止页面拉伸。
我一无所知...
https://jsfiddle.net/cr1bat27/3/
function checkFilters(){
var filters = document.getElementById("filterDiv");
if(filters.style.display == "none"){
filters.style.display = "block";
}
else{
filters.style.display = "none";
}
}
html,body {
padding: 0;
margin: 0;
height:100%;
}
#mainPage{
height:100%;
}
#leftContainer{
float:left;
width:50%;
height: CALC(100% - 50px);
}
#rightContainer{
position: absolute;
right: 0;
top: 50px;
width:50%;
height: CALC(100% - 50px);
background-color: yellow;
}
#tabPanel {
width: 100%;
background-color: lightgrey;
height: 50px;
}
#filterDiv{
height: 300px;
}
#filters{
background-color:grey;
}
table{
width: 100%;
overflow:hidden;
}
td{
height: 100px;
}
tr:nth-child(even){
background-color: #f2f2f2;
}
th{
text-align: left;
}
#contentContainer{
height: 100%;
}
tbody{
display:block;
overflow:auto;
width:100%;
height: 300px;
}
thead tr{
display:block;
height: 50px;
}
<div id="mainPage">
<div id="tabPanel">
</div>
<div id="leftContainer">
<div id="contentContainer">
<div id="filters">
<div>
<a onclick='checkFilters();'>Anchor - click me</a>
</div>
<div id="filterDiv">
I SOMETIMES TAKE UP SPACE
</div>
</div>
<div class="table container">
<table>
<thead>
<tr>
<th>stuff</th>
<th>more</th>
<th>stuff</th>
</tr>
</thead>
<tbody>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="rightContainer">
IGNORE THIS RIGHT STUFF
</div>
</div>
解决方案
在你的 CSS 中使用 'max-height' 而不是 'height'。
tbody{
display:block;
overflow:auto;
width:100%;
max-height: 300px;
}
推荐阅读
- language-agnostic - 函数中的抽象级别
- ios - 嵌入谷歌地图逐向导航
- webpack - 对 .scss 和 .less 文件使用不同的加载器
- c# - 如何在核心项目和具有更改页面的 WPF 应用程序之间使用依赖注入?
- entity-framework - 实体框架核心层次结构id
- google-apps-script - google.script.run.withSuccessHandler 跳过 onSuccess 函数
- angular - 离子视频静音属性被忽略
- python - 使用 ffmpeg 剪切视频的多个部分
- port - Mirth Connect 将文件发送到端口号
- arrays - mongodb 从另一个数组中获取数组项的索引