问答博客资讯标签用户活动
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

上下结构，上边的div高度10% min-height 70px 如何让下边div的高度和上边的高度相加是100%

头像
等等
    29717

    结构：一个大的div里面包含两个小的div上下结构的，上边部分的高度是10% min-height是70px，如何设置下边部分的高度，让其两个的高度总和始终站父元素高度的100%

      <div class="main">
    <div class="a"></div>
    <div class="b"></div>
  </div>
    .main
  width 100%
  height 100%
  border 1px solid red
  box-sizing border-box
  position absolute
  display flex
  align-item column
  .a 
    width 100%
    height 10%
    min-height 70px
    box-sizing border-box 
    border 1px solid green
  .b 
    width 100%
    height auto
    box-sizing border-box 
    border 1px solid black
    csshtmlhtml5
    阅读 2.9k
    2 个回答
    得票最新
    头像
    我在长安长安
      1.2k516
      ✓ 已被采纳

      方法很多，比如flex布局，主轴方向为纵轴,设置第一个元素height: 10%, 第二个元素flex: 1,代码为：

      最外层{
    height: 100%;
    display: flex;
    flex-direction: column;
}
div1{
    height: 10%;
}
div2{
    flex: 1
}

      或者用css运算符calc

      div1{
    height: 10%
}
div2{
    height: calc(100% - 10%);
}
      头像
      青芒
        22615
        <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .main {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .main .a {
            width: 100%;
            height: 10%;
            min-height: 70px;
            background-color: #999;
        }
        .main .b {
            width: 100%;
            display: flex;
            flex: 1;
            background-color: #666;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="a"></div>
        <div class="b"></div>
    </div>
</body>
</html>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题