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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>
</head>
<style>
    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;
    }
</style>
<body>
<div class="contain">
    <div class="A">a</div>
    <div class="B">b</div>
    <div class="C">c</div>
</div>
</body>
</html>

运行效果如下：

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

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

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

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？