Begrenzen Sie die Flexbox-Höhe auf das Browser-Fenster (derzeit überläuft es einen vertikalen Bildlauf)

Question

Ich versuche eine App zu haben, die der Fenstergröße des Browsers entspricht.

Das Menü sollte eine Höhe haben, die 100% des übergeordneten Elements entspricht und keine Höhe von 100% des Bildschirms hat. Ich habe dies:

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

I

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

Mein Code wollen: 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; 
} 

Wie ich das erreichen kann?

Answer 1

Sie müssen Ihre height: 100% an zwei Stellen anpassen. Derzeit kombiniert es mit zusätzlichen px Höhen, die in Ihrem Code definiert sind, was den Überlauf im Browserfenster verursacht.

Statt dessen:

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

aside > nav { 
     height: 100%; 
} 

Versuchen Sie folgendes:

.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

Erfahren Sie mehr über die CSS calc Funktion bei W3C:

8.1. Mathematical Expressions: calc()

Die calc() Funktion ermöglicht mathematische Ausdrücke mit dem Zusatz (+), Subtraktion (-), Multiplikation (*) und Division (/) zu als Komponentenwert verwendet werden. Der Ausdruck calc() repräsentiert das Ergebnis der mathematischen Berechnung, die er enthält, unter Verwendung des Standardoperators Vorrangregeln. Es kann überall dort verwendet werden, wo <length>, <frequency>, <angle>, <time>, <number> oder <integer> Werte erlaubt sind. (Read more.)

Answer 2

Für Hauptcontainer wie diese, ist es am besten 100vh und 100vw zu verwenden.

hier über die modernen CSS-Einheiten lesen: http://tutorialzine.com/2015/05/simplify-your-stylesheets-with-the-magical-css-viewport-units/

Vergessen Sie nicht inherit so viel wie möglich auf Kinder Elemente zu verwenden (wenn es funktioniert). Auf diese Weise gewährleisten Sie eine ordnungsgemäße Kaskade von Höhenelementen.