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

你能做出的jsfiddle？ –

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

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

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

html设置图片与边框的距离,css图片如何设置上边框距离
在css中,可以使用padding-top属性来设置图片的上边框距离,只需要给图片元素添加"padding-top:距离值;"样式即可.padding-top属性可以设置元素的上内 ...
html语言div什么意思,css中div是什么意思？
css中div是什么意思? div是html中的一个标签,通常作为容纳其他元素的容器.在css中,表示一种选择器,可以直接使用div(标签选择器)来查找HTML元素设置样式:而如果是.div那么表示某 ...
html div布局位置横,div位置布局 CSS实现DIV居中对齐 div居右对齐 div居左对齐
使用CSS浮动属性实现DIV各种对齐,比如DIV层左对齐,DIV居中对齐,DIV居右对齐等(DIV靠右居中靠左对齐介绍篇) 实现DIV对齐用到关键属性有两个,一个为float一个为margin. ...
html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示: demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .di ...
css 让div悬浮,纯CSS实现DIV悬浮(固定位置)
纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗等.效果如下: 实现代码: DIV悬浮示例-纯C ...
如何设置word表格中文字与表格线之间的距离（缩短文字和上面表格线之间距离），让表格变得紧凑
首先选中表格-右击-表格属性-单元格-垂直对齐方式-考上然后再右击-表格属性-切换到"行"-"指定高度"打勾,然后输入适当的值(看你的距离要多大,可以是0厘米 ...
html表格鼠标划过变色,CSS实现鼠标滑过表格变色
每个单元格变色: 第1行第1列第2行第2列第3行第3列第4行第4列第5行第5列 ------------------------ 以上都用到expression,实现变得很方便,但是 ...
css中div高度自适应
高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...
CSS和div布局页面
CSS和div布局页面 CSS和div布局页面一.什么是布局网页布局页面元素定位机制二.布局属性浮动清除浮动定位绝对定位相对定位固定定位一.什么是布局网页实质是块与块之间的位置 ...

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

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

最新文章

热门文章