Spezifische Positionierung in Bootstrap

Question

Nehmen wir an, ich habe zwei divs mit einer Klasse von "row" und und ich möchte, dass die zweite immer am unteren Rand des div mit einer Klasse von "Abschnitt" (unten: 0).

Hier ist der Code, um es zu illustrieren besser:

<div class="section"> 
    <div class="row"></div> 
    <div class="row"></div> 
</div> 

Die div mit einer Klasse von „Abschnitt“ eine Höhe von 100vh hat die erste Zeile der etwa 70% der Höhe des Bildschirms einnimmt, und ich möchte, dass die Die zweite Zeile befindet sich immer am unteren Rand der Seite, aber auch nicht mit dem Inhalt der ersten Zeile, wenn die Höhe des Bildschirms kleiner wird. Wie kann ich versuchen, diese Divs zu positionieren?

Answer 1

Hier gehen Sie. Durch Hinzufügen von Inhalt zur ersten Zeile wird die zweite Zeile nach unten verschoben, wenn sie größer als die Höhe des Ansichtsfensters ist. Auf sehr kleinen Bildschirmen erhalten Sie wie gewohnt eine vertikale Bildlaufleiste.

http://codepen.io/dherran/pen/KzYqmW

body, html { 
 
    min-height: 100%; 
 
} 
 

 
.section { 
 
    height: 100vh; 
 
} 
 

 
.row:first-child { 
 
    background: black; 
 
    color: white; 
 
    min-height: calc(100% - 40px); 
 
} 
 

 
.row:nth-child(2) { 
 
    background: blue; 
 
    height: 40px; 
 
}

<div class="section"> 
 
    <div class="row"></div> 
 
    <div class="row"></div> 
 
</div>

I n für diese() Selektoren würde vermeiden. Verwenden Sie stattdessen Klassen. Die Verwendung dieser Selektoren dient nur der Veranschaulichung.