Machen Sie Flex-Elemente in der zweiten Reihe nehmen Sie die verbleibende Höhe des Containers

Question

Ich versuche, ein Layout mit einer Kopfzeile oben, darunter eine Seitenleiste und den Hauptinhalt zu erstellen.

Ich möchte die Sidebar und die Inhaltsansicht übernehmen den vertikalen Platz links von der Kopfzeile haben. Das Problem ist, dass der Header dynamisch neu skalieren kann, so dass ich keine calc() ausführen kann. Meine Lösung war das Flexbox-Schema.

Ich unterteilt das Viewport horizontal in zwei Teile. Einer ist der Header und einer ist ein Wrapper für die Sidebar und den Hauptinhalt.

Die Seitenleiste ist links schwebend und hat einen Prozentsatz der Breite und der Inhalt ist rechts schweben und den Rest gegeben.

Das Problem ist, dass ich versuche, die Sidebar immer 100% Höhe der Verpackung zu machen.

Ich versuchte height: 100% und min-height: 100%, aber diese funktionieren nicht.

Ich möchte es nicht absolut positionieren, da die Seitenleiste nicht erweitert würde, wenn der Wrapper mit dem Hauptinhalt überlaufen würde.

Hier ist mein Stift: http://codepen.io/markt5000/pen/JXNXpW

Wie Sie die orangefarbenen sehen können, ist der Header und der rote Raum ist die Hülle mit der Seitenleiste und den Inhalt.

hier ist das Layout

<div class="header"> 
</div> 

<div class="row"> 

    <div id="sidebar"> 
    </div> 

<div id="main-content"> 
</div> 

</div> 

Answer 1

Es gibt keine Notwendigkeit für:

• height, min-height oder calc auf flex Artikel
• absolute Positionierung
• Schwimmer (in der Tat, sie sind nutzlos, weil floats are ignored in a flex formatting context)

Flex-Eigenschaften verfügen über alle Funktionen, die Sie für das Layout benötigen. Der Schlüssel besteht darin, flex: 1 zu verwenden, damit Elemente die gesamte verfügbare Länge des Containers erweitern.

So kann die Höhe Ihres Headers dynamisch sein und die Seitenleiste und der Hauptinhalt können so gestaltet werden, dass sie die verbleibende Höhe konsumieren. Keine Bildlaufleisten

Hier ist der Code mit einigen Änderungen:

html { height: 100%; } 
 

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

 
.outer-flex-container { 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; /* main flex container stacks items vertically */ 
 
} 
 

 
.header { 
 
    height: 80px;   /* demo purposes; from your original code */ 
 
    background-color: orange; 
 
} 
 

 
.nested-flex-container { 
 
    display: flex;   /* inner flex container stacks items horizontally */ 
 
    flex: 1;     /* KEY RULE: tells this second flex item of main container 
 
            to consume all available height */ 
 
    align-items: stretch; /* KEY RULE: default setting. No need to include. Tells 
 
            children to stretch the full length of the container 
 
            along the cross-axis (vertically, in this case). */ 
 
} 
 

 
.sidebar { 
 
    flex-basis: 20%;  /* set width to 20% */ 
 
    background-color: aqua; 
 
} 
 

 
.content { 
 
    flex: 1;    /* set width to whatever space remains */ 
 
    background: magenta; 
 
}

<div class="outer-flex-container"> 
 

 
    <div class="header">HEADER</div><!-- main flex item #1 --> 
 

 
    <div class="nested-flex-container"><!-- main flex item #2 --> 
 
    
 
      <div class="sidebar">SIDEBAR</div><!-- inner flex item #1 --> 
 
    
 
      <div class="content">MAIN CONTENT</div><!-- inner flex item #2 --> 
 
    
 
    </div><!-- close inner flex container --> 
 

 
</div><!-- close outer flex container -->

Revised Codepn

Answer 2

Ist das, was Sie gehen? http://codepen.io/Shambolaz/pen/xVdVyd

.view .row 
{ 
    flex: 1 1 auto; 
    background:red; 
    height: 90%; 
}