用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都会自动填充。
如果解决了你的问题，给我个采纳吧！
