flex佈局嵌套之高度自適應

時間 2019-11-10

標籤 flex 佈局嵌套高度自適應欄目 Flex 简体版

原文原文鏈接

　　查遍各大資源無任何flex嵌套佈局的例子，通過本身折騰完成了項目中的高度自適應需求（更多應用於前端組件）html

效果圖：前端

html代碼：（關鍵地方已經用顏色特別標識 ^_^）web

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>flex 嵌套 之 高度自適應</title>
  <style media="screen">
    body, html {
        height: 90%;
    }
    .flex {
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
    }
    .item {
        flex: auto;
    }
    .overflow {
        overflow: auto;
    }
    .outer {
        height: 70%;
        border: 1px solid silver;
    }
    .contener {
        background: pink;
        border: 1px solid silver;
    }
    .contener>div{
        padding: 5px;
    }
  </style>
</head>

<body>
  <h1>flex 嵌套佈局</h1>
<div class="flex outer">
  <div style="background-color: silver; padding: 10px;">外容器 自適應內容的區域 ... ...</div>
  <div class="flex item overflow" style="padding: 15px;"> <!-- 嵌套的item加flex樣式 及 overflow: auto屬性 -->
    <div class="flex contener overflow">                  <!-- overflow: auto 高度自適應必須 -->
      <div style="background-color: yellow;">
        <h3>內容器 - 頭部信息</h3>
      </div>
      <div class="item overflow">                         <!-- overflow: auto 高度自適應必須 -->
        內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>
          內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>
            內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>內容溢出滾動部分 <br>
      </div>
      <div style="background-color: yellow;">
        <h3>內容器 - 尾部信息</h3>
      </div>
    </div>
  </div>
</div>

</body>

</html>