html - 在 tbody 上没有固定高度的动态 tbody 滚动

Question

我一直在为这个问题伤脑筋。

我有一个 div 布局，其中某些 div 可以折叠或显示。在这些 div 下方是一个带有表格的 div。我想要的是当内容不再适合页面时，tbody 变得可滚动。我不能给 tbody 一个固定的高度(我在示例中做了什么来显示我想要的滚动)。表格应根据可用高度进行调整，当它不适合时，tbody 应变为可滚动，以防止页面拉伸(stretch)。

我是无能的...

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>

Answer 1

在您的 CSS 中使用“最大高度”而不是“高度”。

tbody{
  display:block;
  overflow:auto;
  width:100%;
  max-height: 300px;
}