füllen Sie die gesamte Höhe mit Flüssigkeitsbehälter

Question

Dies sollte eine einfache Lösung sein, aber ich kann nicht scheinen, es herauszufinden. Ich versuche, meine Behälterflüssigkeitsklasse bis zum unteren Rand des Fensters zu strecken, aber es wird nicht funktionieren. Ich habe alles versucht, die Anwendung von

Height not 100% on Container Fluid even though html and body are

aber nichts davon funktioniert. Hier ist meine HTML und CSS:

html:

<div class="container-fluid fill-height"> 
    <h1 class="text-center">WikiGen</h1> 

    <div class="row fill-height"> 
    <div class="col-md-3"> 
    </div> 
    <div class="col-md-3"> 
     <label class="align-top">Search for an article:</label> 
    </div> 
    </div> 

    <div class="row fill-height"> 
    <div class="col-md-3"> 
    </div> 
    <div class="col-md-3"> 
     <label class="align-top">Or, pick one at random:</label> 
    </div> 
    <div class="col-md-3"> 
     <a href="https://en.wikipedia.org/wiki/Special:Random"> 
     <img id = "dice" src="https://lh3.ggpht.com/kOal-qldAR-YwTvStekh0NbGnwUz-kB5idDv97ZOODRZnxKCs-52YNHLkZX3Ttbjv890=w300"/> 
     </a> 
    </div> 
    <div class="col-md-3"> 
    </div> 
    </div> 
</div> 

css:

.fill-height { 
    min-height: 100%; 
    height:auto !important; 
    height: 100%; 
} 
.container-fluid { 
    background: grey; 
} 
h1 { 
    font-family: "Indie Flower"; 
    font-size: 100px; 
} 
h3 { 
    margin: 10px; 
    font-size: 20px; 
} 
label{ 
    display: inline-block; 
    float: right; 
    clear: left; 
    width: 250px; 
    font-size: 18px; 
    margin: 5.5px; 
    text-align: right; 
} 
input { 
    margin: 5px; 
    width: 300px; 
    float: left; 
} 
.col-md-3 { 
/* background: black; */ 
} 
#dice { 
    width: 50px; 
    height: 50px; 
    margin-top: -5px; 
    margin-left: 40px; 
    mix-blend-mode: multiply; 
} 
.row { 
    margin-bottom: 50px; 
} 
#button { 
    margin-top: 2px; 
} 

Answer 1

Einfach fix - Sie brauchen, um einen Stil hinzufügen, die die html und body Elemente bis zu einer Höhe setzt der 100%. Fügen Sie diese auf Ihre CSS und es sollte in Ordnung sein:

html, body { 
    height: 100% 
} 

Answer 2

Sie Vorteil Blickhöhe nehmen hier

.fill-height{ 
    height: 100vh; 
} 

Sie die Höhe des übergeordneten Elements festlegen können (kann sein Container-Fluid) zu 100vh und stellen Sie die Höhe des Kindelements entsprechend ein und sehen Sie sich bitte viewport-sized-typography an.

Answer 3

Verwenden Sie die 100vh-Methode. In CSS bedeutet vh sichtbare Höhe des Browserfensters. Ich empfehle die Verwendung von Prozentangaben für die Höhe nicht, da diese auf der Gesamtlänge der Seite basiert, einschließlich derjenigen, die derzeit nicht auf dem Bildschirm sichtbar sind. Sie können auch 60vh und andere Werte eingeben, die 60% der sichtbaren Höhe des Browserfensters entsprechen.