Question

我有一个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（或类似的库）就可以了

使用bootstrap的P.S解决方案将是完美的

编辑：我在这里找到了解决方案：
Fill remaining vertical space with CSS using display:flex
http://jsfiddle.net/7yLFL/5/

Answer 1

答案就在这里

Fill remaining vertical space with CSS using display: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; 
}

删除同级div时自动扩展内部div

1 个答案: