Einige Dinge, die Sie Oughta Wissen Bei der Arbeit mit Viewport-Einheiten

0
8

David Chanin hat eine quickie-Artikel zusammenfassen ein problem mit der Einstellung eines Elements der Höhe bis zu 100vh in mobilen Browsern und dann auch die Positionierung etwas auf der Unterseite, der.

Zusammengefasst in dieser Grafik:

Das Problem ist, dass Chrome nicht unter der Adresszeile (browser chrome) berücksichtigt werden, wenn es aufgedeckt, die schneidet das element kurze, zwingen die Unterseite des Elements vorbei an den unteren Rand des tatsächlichen Bildausschnitts.

<div class=”full-page-element”>
<button>Button</button>
</div>
.full-page-element {
height: 100vh;
position: relative;
}

.full-page-element button {
position: absolute;
bottom: 10px;
left: 10px;
}

Sie würden erwarten, dass die Schaltfläche in der Grafik sichtbar sein (vorausgesetzt dieses element ist am oberen Rand der Seite und man noch nicht gescrollt), da es entlang der unteren Kante der 100vh-element. Aber es ist tatsächlich verbirgt sich hinter der browser Google chrome in mobile-Browsern, einschließlich iOS-Safari oder Android-Chrome.

Ich benutze dies eine Menge:

body {
height: 100vh; /* Schön, nicht zu denken, über das HTML-element parent */
margin: 0;
}

Es ist nur ein schneller Weg, um sicherzustellen, dass der Körper ist in voller Höhe ohne Beteiligung anderer Elemente. Ich bin in der Regel tun, dass auf ziemlich low-stakes demo-Typ Zeug, aber ich sagte auch, dass das ein wenig problematisch, weil Sie möglicherweise schreckhaftigkeit als browser Google chrome erscheint und verschwindet, oder Dinge, die vielleicht nicht ganz so zentriert, wie man erwarten würde.

Sie würden denken, dass Sie tun könnten, body { height: 100% }, aber es gibt ein Manko es auch. Der Körper ist ein untergeordnetes Element von <html> die ist nur so groß wie der Inhalt es enthält, genau wie jedes andere element.

Wenn Sie brauchen, den Körper zu voller Höhe, müssen Sie sich mit dem HTML-element als auch:

html, body {
height: 100%;
}

…die isn, dass große Sache und hat zuverlässige cross-browser-Konsistenz.

Es ist die Positionierung, die Dinge auf den unteren Rand, dass ist schwierig. Es ist problematisch, wegen position: absolute; innerhalb der “volle Höhe” (die oft größer als die sichtbaren) container.

Wenn Sie versuchen, so etwas wie eine Feste Navigationsleiste am unteren Rand des Bildschirms, würden Sie wahrscheinlich tun, die mit position: fixed; bottom: 0; und das scheint gut zu funktionieren. Für den browser Google chrome schiebt es nach oben und unten wie man es erwarten würde (video).

Horizontale viewport-Einheiten sind nur als seltsam und problematisch wegen einer anderen bit-browser-UI: Bildlaufleisten. Wenn ein browser-Fenster eine scrollbar sichtbar, dass die Bildlaufleiste wird in der Regel Essen in den visuellen Raum, obwohl ein Wert 100vw berechnet, als ob die scrollbar nicht da war. In anderen Worten, 100vw verursachen das horizontale scrollen in einer Weise, die Sie wahrscheinlich nicht erwarten würden.

Siehe Stift
CSS-Vars für die viewport-Breite minus Scrollbalken von Shaw (@shshaw)
auf CodePen.

Unsere Letzte CSS-Wunschzettel roundup erwähnt besser viewport unit-Behandlung eine Anzahl von Zeiten, so die Entwickler sind eindeutig ziemlich interessiert daran, bessere Lösungen für diese Dinge. Ich bin mir nicht sicher, was das bedeuten würde für die web-Kompatibilität obwohl, weil die änderung der Art, wie Sie arbeiten könnte brechen alle Optionen, die wir verwendet haben, sind sicherlich noch in der wildnis.