Ich habe ein Layout mit zwei Spalten - eine linke div und ein Recht div .
Das Recht div hat eine graue background-color und ich brauche es, um vertikal zu erweitern, je nach der Höhe des Browser-Fensters des Benutzers. Im Moment ist die background-color endet am letzten Stück des Inhalts in diesem div .
Ich habe versucht height:100% , min-height:100%; , usw.
Es gibt eine Reihe von CSS 3-Messeinheiten:
Aus der oben verlinkten W3-Kandidatenempfehlung:
Die prozentualen Längen der Ansichtsfenster beziehen sich auf die Größe des ursprünglich enthaltenen Blocks. Wenn die Höhe oder Breite des anfänglich enthaltenen Blocks geändert wird, werden sie entsprechend skaliert.
Diese Einheiten sind vh (Höhe des Ansichtsfensters), vw (Breite des Ansichtsfensters), vmin (Mindestlänge des Ansichtsfensters) und vmax (maximale Länge des Ansichtsfensters).
Für diese Frage können wir Folgendes verwenden vh : 1vh ist gleich 1 % der Höhe des Ansichtsfensters. Das heißt, dass 100vh ist gleich der Höhe des Browserfensters, unabhängig davon, wo sich das Element im DOM-Baum befindet:
<div></div>div {
height: 100vh;
}Das ist buchstäblich alles, was nötig ist. Hier ist ein JSFiddle-Beispiel davon in Gebrauch.
Dies wird derzeit von allen aktuellen Browsern unterstützt, mit Ausnahme von Opera Mini. Ausprobieren Kann ich die... für weitere Unterstützung.
Im Falle der vorliegenden Frage, die eine linke und eine rechte Trennlinie aufweist, ist hier eine JSFiddle-Beispiel mit einem zweispaltigen Layout, das sowohl vh y vw .
100vh verschieden von 100% ?Nehmen Sie zum Beispiel dieses Layout:
<body style="height: 100%">
<div style="height: 200px">
<p style="height: 100%; display: block;">Hello, world!</p>
</div>
</body>El p Tag ist hier auf 100% Höhe eingestellt, aber da der darin enthaltene div 200 Pixel Höhe hat, werden 100 % von 200 Pixel zu 200 Pixel, no 100% der body Höhe. Verwendung von 100vh bedeutet stattdessen, dass die p Tag wird 100% der Höhe des body unabhängig von der div Höhe. Schauen Sie sich das an zu JSFiddle um den Unterschied leicht zu erkennen!
Sie können verwenden vh die in diesem Fall relativ zu 1% der Höhe des Ansichtsfensters...
Das heißt, wenn Sie die Höhe abdecken wollen, verwenden Sie einfach 100vh .
Sehen Sie sich das folgende Bild an, das ich hier für Sie gezeichnet habe:
Probieren Sie den Ausschnitt aus, den ich für Sie erstellt habe:
.left {
height: 100vh;
width: 50%;
background-color: grey;
float: left;
}
.right {
height: 100vh;
width: 50%;
background-color: red;
float: right;
}
<div class="left"></div>
<div class="right"></div> CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
