So füllen Sie die Höhe des Ansichtsfensters mit Rückenwind css

Question

Ich probiere gerade Tailwind CSS aus und möchte wissen, wie man die Höhe des Ansichtsfensters füllt.

Einnahme dieses Beispiel HTML-Code aus der Dokumentation

<div class="flex items-stretch bg-grey-lighter"> 
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div> 
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div> 
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div> 
</div> 

Wie kann ich es auf den unteren Rand des Bildschirms strecken machen?

Answer 1

wenn Sie meinen, dass die Elemente die ganze Höhe des Darstellungs besetzen, sollte funktionieren mit

100vh 

Answer 2

Wenn der Inhalt des Körpers zu wenig ist den ganzen Bildschirm zu füllen, würde ich Flexbox Strecke vertikal zu die kleineren divs gleichmäßig.

Stellen Sie sicher, dass Körper und Elternteil 100% Höhe haben, und verwenden Sie Flexbox als Spalten und fügen Sie Flex-Basis hinzu, um sich vertikal und gleichmäßig zu verteilen.

html, body {height: 100%;} 

.flex { 
    display: flex; 
    height: 100%; 
    flex-direction: column; 
} 

.flex-1 { 
/* or flex-grow: 1; */ 
flex-basis: 33.33%; 
}