html如何heigh根据width自动,html – 如何根据下一个兄弟高度自动调整DIV高度？

这个怎么样？

.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;

}