Eine häufig gestellte Frage beim Website-Design lautet "Wie stellen Sie die Höhe eines Elements auf 100% ein"?
Dies mag eine einfache Antwort sein. Sie verwenden CSS einfach, um die Höhe eines Elements auf 100% festzulegen, aber dies streckt das Element nicht immer auf das gesamte Browserfenster. Finden wir heraus, warum dies geschieht und was Sie tun können, um diesen visuellen Stil zu erreichen.
Pixel und Prozentsätze
Wenn Sie die Höhe eines Elements mithilfe der CSS-Eigenschaft und eines Werts festlegen, der Pixel verwendet, nimmt dieses Element im Browser so viel vertikalen Platz ein. Zum Beispiel ein Absatz mit einem
Höhe: 100px;
nimmt in Ihrem Entwurf 100 Pixel vertikalen Raum ein. Es ist egal, wie groß Ihr Browserfenster ist, dieses Element wird 100 Pixel hoch sein. Prozentsätze arbeiten anders als Pixel. Gemäß der W3C-Spezifikation werden die prozentualen Höhen in Bezug auf die Höhe des Containers berechnet. Wenn du also einen Absatz mit einem Höhe: 50%;
In einem div mit einer Höhe von 100px beträgt der Absatz 50 Pixel, dh 50% des übergeordneten Elements. Wenn Sie eine Webseite entwerfen und eine Spalte haben, die Sie die volle Höhe des Fensters einnehmen möchten, besteht die natürliche Neigung darin, ein Höhe: 100%;
zu diesem Element. Immerhin, wenn Sie das einstellen Breite
zu Breite: 100%;
Das Element nimmt also den gesamten horizontalen Platz der Seite ein Höhe
sollte gleich funktionieren, richtig? Leider ist dies überhaupt nicht der Fall. Um zu verstehen, warum dies geschieht, müssen Sie verstehen, wie Browser Höhe und Breite interpretieren. Webbrowser berechnen die verfügbare Gesamtbreite in Abhängigkeit davon, wie weit das Browserfenster geöffnet wird. Breite
Wenn Sie für Ihre Dokumente keine Werte festlegen, wird der Inhalt des Browsers automatisch auf die gesamte Breite des Fensters übertragen (100% der Standardwert). Der Höhenwert wird anders als die Breite berechnet. Tatsächlich bewerten Browser die Höhe überhaupt nicht, es sei denn, der Inhalt ist so lang, dass er sich außerhalb des Ansichtsfensters befindet (wodurch Bildlaufleisten erforderlich sind) oder wenn der Webdesigner ein absolutes Element für ein Element auf der Seite festlegt. Höhe
Ansonsten lässt der Browser den Inhalt einfach innerhalb der Breite des Ansichtsfensters bis zum Ende fließen. Die Höhe wird überhaupt nicht berechnet. Probleme treten auf, wenn Sie eine prozentuale Höhe für ein Element festlegen, für das übergeordnete Elemente ohne festgelegte Höhe festgelegt sind. In anderen Worten, die übergeordneten Elemente haben einen Standardwert. Höhe: Auto;
Tatsächlich bitten Sie den Browser, eine Höhe aus einem undefinierten Wert zu berechnen. Da dies einem Nullwert entsprechen würde, führt der Browser nichts aus. Wenn Sie eine Höhe auf Ihren Webseiten auf einen Prozentsatz festlegen möchten, müssen Sie die Höhe von festlegen jeden übergeordnetes Element des Elements, dessen Höhe definiert werden soll. Mit anderen Worten, wenn Sie eine solche Seite haben: Inhalt hier
Sie wollen wahrscheinlich die div
und der Absatz darin soll eine Höhe von 100% haben, aber das div hat tatsächlich zwei übergeordnete Elemente: und. Um die Höhe des zu bestimmen div
auf eine relative Höhe müssen Sie die Höhe von einstellen Karosserie
und html
Elemente auch. Sie müssen also CSS verwenden, um die Höhe nicht nur der div-, sondern auch der body- und HTML-Elemente festzulegen. Dies kann eine Herausforderung sein, da Sie bei einer Einstellung auf 100% Höhe schnell überwältigt werden können, nur um den gewünschten Effekt zu erzielen. Da Sie nun wissen, wie Sie die Höhe Ihrer Seitenelemente auf 100% einstellen, kann es aufregend sein, alle Ihre Seiten zu bearbeiten, aber es gibt ein paar Dinge, die Sie beachten sollten: Um dies zu beheben, können Sie auch die Höhe des Elements einstellen. Wenn Sie es einstellen Auto,
Bildlaufleisten werden angezeigt, wenn sie benötigt werden, verschwinden jedoch, wenn sie nicht benötigt werden.Dies behebt den visuellen Bruch, fügt jedoch Bildlaufleisten hinzu, wo Sie sie möglicherweise nicht möchten. Sie können diese Herausforderung auch meistern, indem Sie mit CSS-Ansichtsfenstern experimentieren. Wenn Sie die Maßeinheit für die Ansichtsfensterhöhe verwenden, können Sie die Größe von Elementen so anpassen, dass sie eine definierte Höhe des Ansichtsfensters einnimmt. Dies ändert sich, wenn sich das Ansichtsfenster ändert. Dies ist eine großartige Möglichkeit, um Ihre 100% -igen Ansichten auf einer Seite anzuzeigen, sie müssen jedoch für verschiedene Geräte und Bildschirmgrößen flexibel sein. Warum Prozentsatzhöhen versagen
Einige Dinge zu beachten, wenn Sie mit 100% Höhen arbeiten
Viewport-Einheiten verwenden
