html5 div 高度自适应,怎么让div里面的子元素的高度自适应呢

用flex布局可以解决这个问题

跟你一样的div结构，为了便于看清和区分，里面写了字母。样式里每个div都加了背景色。完整代码如下:

Title

body {

margin: 0;

}

.contain {

background: gray;

height: 400px;

display: flex;

flex-direction: column;

}

.A {

background: red;

}

.B {

background: yellow;

flex-grow: 1;

}

.C {

background: blue;

}

a

b

c

运行效果如下：

下面白色的部分是网页的空白部分。可以看出，已经实现了你要的效果。A B C我都没有给高度，B的高度是自动填满contain的，所以压根看不到contain的灰色

。

你可以复制代码自己运行一下，在浏览器里随意的改contain、A、C的高度，不管怎么改，B都会自动填充。

如果解决了你的问题，给我个采纳吧！