问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

一个父元素有两个子元素上下排列，怎么使下面的子元素撑满父元素剩余高度？

头像
陈落
    6353765

    由于上面的子元素有高度，下面的子元素会被上面的元素挤出父元素的范围。

        <style>
        .a {
            height: 100px;
            width: 100px;
        }
        .b {
            height: 10px;
            width: 10px;
        }
        .c {
            height: 100%;
            width: 100%;
            background-color: red;
        }
    </style>
</head>
<body>
   <div class="a">
       <div class="b"></div>
       <div class="c"></div>
   </div>
    前端csshtml
    阅读 4.6k
    3 个回答
    得票最新
    头像
    qinfeng
      1.1k1213
      ✓ 已被采纳
      .a {
    display: flex;
    flex-direction: column;
    height: 100px;
    width: 100px;
}
.b {
    height: 10px;
    width: 10px;
}
.c {
    flex: 1;
    width: 100%;
    background-color: red;
}
      头像
      抱歉_你想多了
        8431828

        height: 10px
        height: calc(100% - 10px)

        头像
        Witcher_ciri
          364

          `

          .a {
    display: flex
    flex-direction: column
    width: 100px
    height: 100px
}
.b {
    width: 100%
    height: 10px
}
.c {
    flex: 1
    width: 100%
    background-color: red
}

          `
          看看这样能满足你的要求吗

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题