i've been breaking my head over this issue.
I have a div layout where certain divs can be collapsed or shown. Below those divs is a div with a table in it. What i want is that the tbody becomes scrollable when the content no longer fits on the page. I can't give the tbody a fixed height (what i did do in the example to show the scroll i want). the table should adjust based on the available height and the tbody should become scrollable when it doesn't fit, to prevent page stretching.
I'm clueless...
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>
