我对CSS有问题，我现在不知道该如何解决几天。到处搜索答案...
这是我为此目的创建的小提琴：
https://jsfiddle.net/tdckcxhh/8/
<body style="margin:0; background: lightgray;">
<div style="width: 400px; height: 400px; position:absolute; top: 30px; left: 30px;">
<div style="height:100%; border: 1px solid red;">
<div style="background:#d0d0ff" class="disclaimer">
This is a removable message which is always different (up to 100 words)
</div>
<div style="background:#d0d00f; height: 25px" class="desc">
This is content description
</div>
<div style="background:#d0ffd0; height: 100%">
<div id='newdiv'>
<div class="overflow: auto;">
<table class="table2">
<tr>
<td width="40%">Name</td>
<td width="20%">zip</td>
<td>Address</td>
</tr>
<tr>
<td>A very long name</td>
<td>12345</td>
<td>followed by an even longer name</td>
</tr>
<tr>
<td>A very long name 2</td>
<td>23456</td>
<td>followed by another name</td>
</tr>
<tr>
<td>A very long name</td>
<td>12345</td>
<td>followed by an even longer name</td>
</tr>
<tr>
<td>A very long name 2</td>
<td>23456</td>
<td>followed by another name</td>
</tr>
<tr>
<td>A very long name</td>
<td>12345</td>
<td>followed by an even longer name</td>
</tr>
<tr>
<td>A very long name 2</td>
<td>23456</td>
<td>followed by another name</td>
</tr>
<tr>
<td>A very long name</td>
<td>12345</td>
<td>followed by an even longer name</td>
</tr>
<tr>
<td>A very long name 2</td>
<td>23456</td>
<td>followed by another name</td>
</tr>
<tr>
<td>A very long name</td>
<td>12345</td>
<td>followed by an even longer name</td>
</tr>
<tr>
<td>A very long name 2</td>
<td>23456</td>
<td>followed by another name</td>
</tr>
<tr>
<td>A very long name 2</td>
<td>23456</td>
<td>followed by another name</td>
</tr>
<tr>
<td>A very long name 2</td>
<td>23456</td>
<td>followed by another name</td>
</tr>
<tr>
<td>A very long name 2</td>
<td>23456</td>
<td>followed by another name</td>
</tr>
<tr>
<td>A very long name 2</td>
<td>23456</td>
<td>followed by another name</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".disclaimer").click(function(){
$(this).remove();
});
});
</script>
代码描述：
表长度总是不同的。有时，它只是一行，但可以达到500行。台式标头总是相同的。
根据桌子的大小，有适当的免责声明 - 可移动的消息也总是不同的。用户通过单击它
问题：
我需要一个表格在DIV内部，该表的自动高度等于放置后剩下的，并放置了描述。如果桌子大于Div，则该Div将具有滚动条。删除免责声明后，表Div将自动扩展并在需要时保持滚动条
这必须是纯CSS解决方案，它可能具有尽可能多的包装HTML元素 - 只要它看起来像原始，并且具有所需的功能，而无需使用jQuery（或类似库）
带有引导程序的P.S解决方案将是完美的
编辑：我在这里找到了一个解决方案：
使用显示器使用CSS填充剩余的垂直空间：Flex
http://jsfiddle.net/7ylfl/5/
答案在这里
使用显示器使用CSS填充剩余的垂直空间：flex
http://jsfiddle.net/7ylfl/5/
CSS：
section {
display: flex;
flex-flow: column;
height: 300px;
}
header {
background: tomato;
}
div {
flex: 2 ;
background: gold;
overflow: auto;
}
footer {
background: lightgreen;
min-height: 60px;
}