html设置表格和div的距离,CSS/HTML Div调整大小和表格定位

我有3个div，父div，子div在顶部，另一个在底部。任何帮助将不胜感激，这里是我想达到的目标：CSS/HTML Div调整大小和表格定位

当顶格调整大小/增加其大小，包含表将缩小，但保持在其位置上的底部DIV。请看下面的模拟，以便你可以清楚地看到它。

$("#btnExpand").click(function(){

$(#top).css("height","400px");

});

.wrapper{

height: 73vh;

display: flex;

flex-direction: column;

border: 2px solid red;

}

#top{

border:2px solid blue;

position:relative;

height:100px

}

#bottom{

border:2px solid green;

position:relative;

height:100%"

}

table, th, td {

border: 1px solid black;

}

Download CSV of Table

Firstname	Lastname	Firstname	Lastname	Firstname	Lastname	Firstname
John	Jaranjan	John	Jaranjan	John	Jaranjan	John
Boom	Panes	John	Jaranjan	John	Jaranjan	John
Boom	Panes	John	Jaranjan	John	Jaranjan	John
Boom	Panes	John	Jaranjan	John	Jaranjan	John
Boom	Panes	John	Jaranjan	John	Jaranjan	John
Boom	Panes	John	Jaranjan	John	Jaranjan	John

2016-07-19

Rocky

+0

你能做出的jsfiddle？ –

+0

不要只是做一个小提琴，在自己的问题中包含代码。更好的是在问题编辑器中使用'''''按钮在问题中包含一个StackOverflow片段。它就像一个小提琴，但在问题(或答案)它是自我。请参阅：http://stackoverflow.com/help/mcve –

+0

好吧，我将创建的jsfiddle，您还可以检查我的模型图象，我连接，谢谢:) –