高度 100% 彈性

Question

我想讓內容 div 適合 100% 的高度。 出於某種原因，容器 div 恰好是一個彈性項目。 將 100% 高度設置為 flex 項目中的 div 是否合適？ 或者我也應該將內容 div 設置為一個彈性項目。

此外， flex-direction 部分令人困惑。 列不起作用，但行起作用。 我想 flex-direction 只影響 flex 項目。

jsfiddle在這里

<div class="wrapper">
  <div class="container">
    <div class="content">
      Hello there
    </div>
  </div>
</div>


html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.wrapper {
  border: 1px solid red;
  padding: 20px;
  min-height: 100%;
  display: flex;
  /* change flex-direction from column to row will work */
  flex-direction: column;
}

.container {
  border: 1px solid green;
  padding: 20px;
  flex: 1;
}

.content {
  border: 1px solid blue;
  height: 100%;
}

Answer 1

您可以重疊（嵌套）彈性框：

 html, body { margin: 0; padding: 0; height: 100%; } .wrapper { border: 1px solid red; padding: 20px; min-height: 100%; display: flex; /* change flex-direction from column to row will work */ flex-direction: column; box-sizing:border-box; } .container { display:flex; flex-direction: column;/* up to your needs */ border: 1px solid green; padding: 20px; flex: 1; } .content { border: 1px solid blue; flex:1; }

 <div class="wrapper"> <div class="container"> <div class="content"> Hello there </div> </div> </div>

您可能還介意 box-sizing 屬性在大小計算中包含邊框和填充。

Answer 2

你可以試試這個：

.wrapper {
  border: 1px solid red;
  padding: 20px;
  min-height: 100%;
  /* This set a precise value for the height */  
  height: 100%;
  display: flex;
  /* change flex-direction from column to row will work */
  flex-direction: column;
}