Prozentwerte in CSS kann knifflig sein. Wenn Sie die Höhe einstellen CSS-Eigenschaft eines Elements auf 100 %, was genau setzen Sie auf 100 %? Das ist die Hauptfrage, auf die Sie beim Umgang mit Prozentsätzen in CSS stoßen, und da Layouts komplexer werden, wird es Es wird viel schwieriger, den Überblick über die Prozentsätze zu behalten, was zu einem geradezu bizarren Verhalten führt, wenn Sie es nicht sind Vorsichtig.
Das Arbeiten mit Prozentsätzen hat einen deutlichen Vorteil; Prozentbasierte Layouts passen sich automatisch an unterschiedliche Bildschirmgrößen an. Aus diesem Grund ist die Verwendung von Prozentsätzen im Responsive Design unerlässlich. Beliebte Rastersysteme und CSS-Frameworks verwenden Prozentwerte, um ihre responsiven Raster zu erstellen.
Natürlich gibt es bestimmte Situationen, die besser für statische Werte geeignet sind, und andere, die mit etwas Adaptivem viel besser funktionieren, z. B. Prozentsätze. Sie müssen entscheiden, welchen Weg Sie mit den Elementen in Ihrem Design einschlagen möchten.
Statische Einheiten
Pixel sind statisch. Zehn Pixel auf einem Gerät sind zehn Pixel auf jedem Gerät. Sicher, es gibt Dinge wie die Dichte und die Art und Weise, wie ein Gerät tatsächlich ein Pixel interpretiert, aber Sie werden keine größeren Änderungen feststellen, da der Bildschirm eine andere Größe hat.
Mit CSS können Sie ganz einfach die Höhe in Pixel, und es wird gleich bleiben. Es ist vorhersehbar.
div {
Höhe: 20px;
}
Das wird sich nicht ändern, es sei denn, Sie ändern es mit JavaScript oder ähnlichem.
Nun, diese Medaille hat noch eine andere Seite. Es wird sich nicht ändern. Das bedeutet, dass Sie alles genau ausmessen müssen, und selbst dann funktioniert Ihre Site nicht auf allen Geräten. Aus diesem Grund funktionieren statische Einheiten in der Regel besser für untergeordnete Elemente, Medien und Dinge, die sich verzerren und seltsam aussehen, wenn sie sich dehnen und wachsen.
Einstellen der Höhe eines Elements auf 100 %
Wenn Sie die Höhe eines Elements auf 100 % festlegen, erstreckt es sich dann auf die gesamte Bildschirmhöhe? Manchmal. CSS behandelt Prozentwerte immer als Prozentsatz des übergeordneten Elements.
Ohne übergeordnetes Element
Wenn Sie ein neues erstellt haben die nur im body-Tag Ihrer Website enthalten ist, entsprechen wahrscheinlich 100 % der Bildschirmhöhe. Es sei denn, Sie haben einen Höhenwert für die definiert.
Der HTML-Code:
Das CSS:
div {
Höhe: 100%;
}
Das Die Höhe des Elements entspricht der des Bildschirms. Standardmäßig ist die erstreckt sich über den gesamten Bildschirm, sodass Ihr Browser die Höhe des Elements berechnet.
Mit einem Elternelement mit statischer Höhe
Wenn Ihr Element in einem anderen Element verschachtelt ist, wird die Browser verwendet die Höhe des übergeordneten Elements, um einen Wert für 100 % zu berechnen. Wenn sich Ihr Element also in einem anderen Element mit einer Höhe von 100px befindet und Sie die Höhe des untergeordneten Elements auf 100 % setzen. Das untergeordnete Element wird 100px hoch sein.
Der HTML-Code:
Das CSS:
#eltern {
Höhe: 100px;
}
#kind {
Höhe: 100%;
}
Die für das untergeordnete Element verfügbare Höhe wird durch die Höhe des übergeordneten Elements eingeschränkt.
Mit einem übergeordneten Element mit einer prozentualen Höhe
Es mag nicht intuitiv erscheinen, aber Sie können die Höhe eines Elements auf einen Prozentsatz eines Prozentsatzes festlegen. Wenn ein Element ein übergeordnetes Element hat, dessen Höhe ebenfalls als Prozentwert definiert ist, verwendet der Browser denselben Wert wie das übergeordnete Element, das er bereits basierend auf seinem übergeordneten Element berechnet hat. Das liegt daran, dass 100 % eines Wertes immer noch dieser Wert sind.
Das CSS:
#eltern {
Höhe: 75%;
}
#kind {
Höhe: 100%;
}
In diesem Fall beträgt die Höhe des übergeordneten Elements 75 % des gesamten Bildschirms. Dem Kind stehen dann auch 100 % der Gesamtgröße zur Verfügung.
Mit einem übergeordneten Element ohne Höhe
Wenn das übergeordnete Element keine definierte Höhe hat, geht der Browser interessanterweise Stufe für Stufe nach oben, bis er einen konkreten Wert findet, mit dem er arbeiten kann. Wenn es bis zum ohne etwas zu finden, verwendet der Browser standardmäßig die Bildschirmhöhe und gibt Ihrem Element eine äquivalente Höhe.
Der HTML-Code:
Das CSS:
#eltern {}
#kind {
Höhe: 100%;
}
Das untergeordnete Element erstreckt sich bis zum oberen und unteren Rand des Bildschirms.
Die Viewport-Einheiten
Da die Berechnung mit Prozenteinheiten schwierig sein kann und jedes Element an sein übergeordnetes Element gebunden ist, Es gibt eine Reihe von Einheiten, die all das ignorieren, und die Basiselementgrößen direkt auf dem verfügbaren Bildschirm Platz. Dies sind die Einheiten des Ansichtsfensters, und sie geben Ihnen eine direkte Größe basierend auf der Höhe oder Breite eines Bildschirms, unabhängig davon, wo sich das Element befindet.
So legen Sie die eines Elements fest Höhe gleich der Höhe des Bildschirms, setzen Sie den Höhenwert auf 100vh.
div {
Höhe: 100vh;
}
Es ist leicht, Ihr Layout dabei zu unterbrechen, und Sie müssen sich bewusst sein, welche anderen Elemente es sein werden betroffen, aber das Ansichtsfenster ist bei weitem die direkteste Möglichkeit, die Höhe eines Elements auf 100 % der Höhe zu setzen Bildschirm.