用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;
}
abc
运行效果如下:
下面白色的部分是网页的空白部分。可以看出,已经实现了你要的效果。A B C我都没有给高度,B的高度是自动填满contain的,所以压根看不到contain的灰色
。
你可以复制代码自己运行一下,在浏览器里随意的改contain、A、C的高度,不管怎么改,B都会自动填充。
如果解决了你的问题,给我个采纳吧!