Sticky Header und Footer mit Autoscrolling Inhalt

Question

Ich versuche, ein Layout zu machen, wo die Kopfzeile und die Fußzeile an ihrer Position klebrig wäre, und der Inhalt würde eine minimale Höhe und zeigt eine Bildlaufleiste, wenn die Ansichtsfensterhöhe zu klein ist .

Ich erfolgreich durchgeführt, auf diesem Codepen: http://codepen.io/DlafCreative/pen/wzdOEN inspiriert von einem anderen.

Das Problem ist, dass das HTML-Markup mit dem Rahmen nicht bequem Ich benutze (Angular2), da die <header> auf dem gleichen Niveau ist, dass <main> und die <footer> außerhalb <prop-wrapper>.

In meiner App sollte Header auf allen Seiten gleich bleiben, während Fußzeile dynamisch sein sollte. Also, was Ich mag würde ist <header> vor <prop-wrapper> mit und <footer> nach <main>, wie diese codepen gegabelt: http://codepen.io/DlafCreative/pen/xEAXxy Auf diese Weise konnte ich leichter, den Inhalt

Nun definieren, ich kämpfen, um das gleiche Verhalten mit, dass bekommen Markup. Hilfe wäre willkommen! Thx viel :)

Answer 1

Dies könnte Ihnen helfen. So, wie es weiter unten funktioniert, ist:

1. Zunächst einmal, entfernen Sie die Standard-Rand des Browsers:

   body { 
       margin: 0; 
   } 
   

2. Machen Sie Ihre prop-body ein flexbox von display: flex verwenden. Sie geben flex-direction: column, um es vertikal biegen zu lassen. So füllen Höhe der gesamte Bildschirm height: 100vh geben:

   prop-body { 
       display: flex; 
       flex-direction: column; 
       height: 100vh; 
   } 
   

3. hinzufügen flex: 1 zu prop-wrapper, so dass es den Raum zwischen header und footer füllt.

   Dies ist eine Abkürzung bedeutet das:

   ein. flex-grow ist 1 b. flex-shrink ist 1

   was bedeutet, dass die Höhe dieses Flex Item den verbleibenden Raum durch Wachsen oder Schrumpfen füllen wird.

Siehe flex: 1 Bedeutung here.

flex: Entspricht Flex: 1 0. Bildet die Flex Element flexibel und setzt die Flex Basis auf Null, in einer Position führt, die den angegebenen Anteil des Freiraum im Flex Behälter aufnimmt. Wenn alle Objekte im Flex-Container dieses Muster verwenden, sind ihre Größen proportional zum angegebenen Flex-Faktor .

4. Jetzt können Sie bequem die Layout- sehen wir einige verschachtelte flexboxes verwenden.

body { 
 
    margin: 0; 
 
} 
 
prop-body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 
prop-body header { 
 
    background: grey; 
 
    padding: 20px; 
 
} 
 
prop-body prop-wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background: lightblue; 
 
    flex: 1; 
 
} 
 
prop-body prop-wrapper main { 
 
    overflow-y: auto; 
 
    flex: 1; 
 
} 
 
prop-body prop-wrapper main p { 
 
    padding: 50px; 
 
} 
 
footer { 
 
    display: flex; 
 
    background: pink; 
 
    min-height: 50px; 
 
    height: 10vh; 
 
} 
 
footer .footer-content { 
 
    flex: 1; 
 
    background: plum; 
 
}

<prop-body> 
 
    <header>Header</header> 
 
    <prop-wrapper> 
 
    <main> 
 
     <p>CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
 
     CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</p> 
 
    </main> 
 
    <footer> 
 
     <div class="footer-content"> 
 
     Footer 
 
     </div> 
 
    </footer> 
 
    </prop-wrapper> 
 
</prop-body>