0
私は数日後に解決する方法がわからないCSSに問題があります。
https://jsfiddle.net/tdckcxhh/8/兄弟divが削除されたときに内部divを自動展開する
<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は自動的に展開され、必要に応じてスクロールバーが保持されます
これは、必要に応じて多くのラッピングHTML要素を持つ純粋なCSSソリューションでなければなりません。ブートストラップ付き
PSソリューションは完璧
EDITなります
jQueryの（または類似のライブラリ）を使用せずに必要な機能を持っている：私はここで解決策を見つけた：Fill remaining vertical space with CSS using display:flex
http://jsfiddle.net/7yLFL/5/