这个怎么样?
.wrap
{
height:300px;
border:solid 1px blue;
}
.table {
width:100%;
height:100%;
display: table;
border-spacing: 2px;
}
.row
{
display: table-row;
}
.cell
{
display: table-cell;
border:solid 1px red;
vertical-align: middle;
}
#adjust{
height:50px;
}
这个html:
Auto Adjust
Fixed Height
更新
你需要让所有孩子都使用JS并为所有孩子应用一个新的高度.
html, body
{
height: 100%;
margin:0;
padding:0;
}
*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrap
{
height:300px;
border:solid 1px blue;
}
.table
{
width:100%;
height:100%;
}
.row
{
height: 50%;
position: relative;
}
.cell
{
border:solid 1px red;
vertical-align: middle;
position: absolute;
top:2px;
right:2px;
bottom:2px;
left:2px;
}
#adjust:not([style])
{
background-color: green;
}