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

flex布局有一个自适应高度的div，里面有两个div，一个高度为100px，希望另一个填满剩下的高度

头像
沐晨
    374816

    我需要一个这样的布局

    clipboard.png

    于是我使用了flex布局

    但是我的自适应高度没有效果

    html

     <div class="container">
    <div class="header" style="background-color:#333;">Header</div>
    <div class="div-box">
      <div class="aside"  style="background-color:#666;">Aside</div>
      <div class="content" style="background-color:#999;">Main</div>
    </div>
  </div>

    css

    <style scoped lang="scss" type="text/scss">
  .container{
    color: #fff;
    display: flex;
    flex-direction:column;
    .header{
      height: 60px;
    }
    .div-box{
      flex: 1;
      display: flex;
      .aside{
        width: 200px;
      }
      .content{
        flex: 1;
      }
    }
  }
</style>

    我的div-box里面的左侧固定宽度，右侧自适应宽度是有效的。但是自适应高度的不行

    不知道为什么

    目前我的页面是这样子

    =======================================
    可以了
    我好像是没有设置container的高度

    把样式改成

    <style scoped lang="scss" type="text/scss">
  #layout{
    height: 100%;
  }
  .container{
    color: #fff;
    display: flex;
    flex-direction:column;
    height: 100%;
    .header{
      height: 60px;
    }
    .div-box{
      flex: 1;
      height: 100%;
      display: flex;
      .aside{
        width: 200px;
      }
      .content{
        flex: 1;
      }
    }
  }
</style>
    flexjavascriptcsscss3html
    阅读 12.6k
    1 个回答
    得票最新
    头像
    fzerotriluby
      1337
      <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title>
<style> 
#main
{
    width:220px;
    height:300px;
    border:1px solid black;
    display:flex;
}

#main div
{
    flex:1;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">红色</div>
  <div style="background-color:lightblue;">蓝色</div>  
  <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>

<p><b>注意:</b> Internet Explorer 9 及更早版本不支持 flex 属性。</p>
<p><b>注意:</b> Internet Explorer 10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。</p>
<p><b>注意:</b> Safari 6.1 (及更新浏览器) 通过 -webkit-flex 属性支持。</p>

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