鍍金池/ 問答/HTML5  UI  HTML/ flex布局有一個自適應高度的div，里面有兩個div，一個高度為100px，希

flex布局有一個自適應高度的div，里面有兩個div，一個高度為100px，希望另一個填滿剩下的高度

我需要一個這樣的布局

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>
回答
編輯回答
失魂人
<!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>
2017年1月13日 23:42