Einstellung html, Körper mit min-height: 100% aber auch erlauben es zu erweitern

Question

So fragte ich mich, ob es möglich war, den HTML/Körper auf mindestens 100% Höhe mit CSS (irgendwie) zu haben und es erweitern zu lassen wie benötigt? Im Moment habe ich eine Flexbox, wo der Körper den verbleibenden Platz einnimmt (wie erwartet).

Auf einer Live-Website, kann der Körper nicht die gesamte Seite aufnehmen, also möchte ich die Flexbox füllen und die Fußzeile an der Unterseite stecken, aber wenn auf kleineren Bildschirmen (dh Handy) angezeigt wird wird wahrscheinlich den sichtbaren Bildschirm füllen. An diesem Punkt (oder wenn der Körper sowieso den Bildschirm füllt), möchte ich, dass die Fußzeile auf ihrem fröhlichen Weg weitergeht.

Ohne den Rahmen auf den Flexbox-Container zu zeichnen, scheint er wie vorgesehen zu funktionieren. Aber aus spekulativen Gründen, wo die Umrandung/Größe des Containers wichtig sein kann, ist es möglich, dass er korrekt gezeichnet wird (die Tatsache ignorierend, dass der Überlauf gerade erscheint, scheint ein hacky Job zu sein).

Ich werde auch Javascript-Antworten für jetzt akzeptieren, aber CSS wird optimalste

html, body { 
 
    height: 100%; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px solid black; 
 
    height: 100%; 
 
} 
 

 
.body { 
 
    flex: 1; 
 
    min-height: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <header style="background-color: lightblue"> 
 
    header 
 
    </header> 
 
    <div class="body" style="background-color: orange; opacity: 0.3"> 
 
    body 
 
    </div> 
 
    <footer style="background-color: yellow"> 
 
    footer 
 
    </footer> 
 
</div>

Answer 1

Nur min-height anstelle von height auf Ihrem Wrapper:

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

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px solid black; 
 
    min-height: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
.body { 
 
    flex: 1; 
 
    min-height: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <header style="background-color: lightblue"> 
 
    header 
 
    </header> 
 
    <div class="body" style="background-color: orange; opacity: 0.3"> 
 
    body 
 
    </div> 
 
    <footer style="background-color: yellow"> 
 
    footer 
 
    </footer> 
 
</div>

Answer 2

Sie können es mit Standard percentage heights arbeiten lassen. Aber das ist ein bisschen schwierig und, ehrlich gesagt, unnötig. Verwenden Sie einfach viewport percentage units.

Hier ist eine vereinfachte Version des Codes:

.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
    border: 1px solid black; 
 
} 
 

 
.body { 
 
    flex: 1 0 300px; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
}

<div class="wrapper"> 
 
    <header style="background-color: lightblue">header</header> 
 
    <div class="body" style="background-color: orange; opacity: 0.3;">body</div> 
 
    <footer style="background-color: yellow">footer</footer> 
 
</div>