將flexbox的高度限制爲瀏覽器窗口（目前它的溢出導致垂直滾動）

我正在嘗試使用適合瀏覽器窗口大小的應用程序。將flexbox的高度限制爲瀏覽器窗口（目前它的溢出導致垂直滾動）

菜單的高度應該符合父級的100％，並且不得高於屏幕的100％。我有這樣的：

|---------------------------------| 
| Header       | 
|---------------------------------| 
||-------------------------------|| 
|| flex       || 
|||--------------|    || 
||| Menu   |    || 
|||    |    || 
||| 1 item  |    || 
|||    |    || 
|||    |    || 
|||    |    || 
|||    |---------------|| 
    |    | 
    |--------------|

我想

|---------------------------------| 
| Header       | 
|---------------------------------| 
||-------------------------------|| 
|| flex       || 
|||--------------|    || 
||| Menu   |    || 
|||    |    || 
||| 1 item  |    || 
|||    |    || 
|||    |    || 
|||    |    || 
|||    |    || 
|||--------------|---------------||

我的代碼：https://jsfiddle.net/vLbzLtyf/

<div app-context> 
    <header> 
     <h1>Application</h1> 
    </header> 

<div class="layout-flex-container row"> 
<div class="element"> 
    <aside> 
    <h2>Menu</h2> 
    <nav> 
     <ul> 
     <li> 
      <span> 
          <i class="material-icons">person</i> 
          <a href="#">John Doe</a> 
         </span> 
     </li> 
     <li> 
      <span> 
          <i class="material-icons">person</i> 
          <a href="#">Paul Smith</a> 
         </span> 
     </li> 
     <li> 
      <span> 
          <i class="material-icons">person</i> 
          <a href="#">Jean Dupont</a> 
         </span> 
     </li> 
     <li> 
      <span> 
          <i class="material-icons">person</i> 
          <a href="#">Xavier Lin</a> 
         </span> 
     </li> 
     </ul> 
    </nav> 
    </aside> 
</div>

html, 
body { 
    height: 100%; 
} 

body { 
    margin: 0; 
} 

div[app-context] { 
    height: 100%; 
} 


/* ************************************************************************** */ 

.layout-flex-container { 
    display: flex; 
    align-items: stretch; 
    flex-wrap: nowrap; 
    height: 100%; 
} 

.layout-flex-container.row { 
    flex-direction: row; 
} 

.layout-flex-container.row .element { 
    flex: 0 1 auto; 
    height: 100%; 
} 


/* ************************************************************************** */ 

header { 
    display: flex; 
    flex-wrap: nowrap; 
    flex-direction: row; 
    align-items: center; 
    justify-content: flex-start; 
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); 
    box-sizing: border-box; 
    border: none; 
    width: 100%; 
    height: 128px; 
    margin: 0; 
    padding-bottom: 64px; 
    z-index: 3; 
    background-color: rgb(63, 81, 181); 
    color: rgb(255, 255, 255); 
} 

header > h1 { 
    flex: 1; 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0 40px 0 80px; 
    font-family: "Roboto", "Helvetica", "Arial", sans-serif; 
    font-size: 20px; 
    line-height: 1; 
    letter-spacing: .02em; 
    font-weight: 400; 
} 


/* ************************************************************************** */ 

aside { 
    height: 100%; 
    width: 340px; 
    background: transparent; 
    color: #424242; 
    z-index: 5; 
} 

aside > h2 { 
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); 
    box-sizing: border-box; 
    color: black; 
    line-height: 64px; 
    padding-left: 40px; 
    margin: 0; 
    font-family: "Roboto", "Helvetica", "Arial", sans-serif; 
    font-size: 20px; 
    letter-spacing: .02em; 
    font-weight: 400; 
} 

aside > nav { 
    height: 100%; 
    background: #fafafa; 
    padding-top: 16px; 
    box-sizing: border-box; 
} 

aside > nav > ul { 
    display: flex; 
    flex-wrap: nowrap; 
    flex-direction: column; 
    align-items: flex-start; 
    padding: 8px 0; 
    margin: 0; 
    list-style: none; 
} 

aside > nav > ul li { 
    box-sizing: border-box; 
    font-family: "Roboto", "Helvetica", "Arial", sans-serif; 
    font-size: 16px; 
    font-weight: 400; 
    letter-spacing: .04em; 
    line-height: 1; 
    min-height: 48px; 
    padding: 16px; 
    color: rgba(0, 0, 0, .87); 
    overflow: hidden; 
}

我怎樣才能做到這一點？

來源

2016-03-31 efxzsh

你需要在兩個地方調整你的height: 100%。目前，它與您的代碼中定義的其他px高度相結合，導致瀏覽器窗口中的溢出。

取而代之的是：

.layout-flex-container { 
     height: 100%; 
} 

aside > nav { 
     height: 100%; 
}

試試這個：

：
.layout-flex-container { 
     height: calc(100% - 128px); /* subtract the defined height of the header element */ 
} 

aside > nav { 
     height: calc(100% - 64px); /* subtract the defined line-height of the h2 element */ 
} 
Revised Fiddle

在W3C詳細瞭解CSS calc功能3210

的calc()功能允許與另外數學表達式（+），減（ - ），乘（*），和除（/）的使用作爲組分值。 calc()表達式表示它包含的數學計算結果，使用標準運算符優先規則。它可用於任何地方<length>,<frequency>, <angle>,<time>,<number>或<integer>值是允許的。（Read more.）