Sommige Dingen die Je Oughta Know Bij het Werken met Kijkvenster Eenheden

0
8

David Chanin heeft een vluggertje artikel samenvatten van een probleem met het instellen van een element hoogte te 100vh in mobiele browsers en vervolgens ook de positionering van iets op de onderkant van dat.

Samengevat in deze afbeelding:

Het probleem is dat Chrome niet de adresbalk (browser chrome) in aanmerking wanneer het geopenbaard wordt, die snijdt het element kort, waardoor de onderkant van het element langs de onderkant van de actuele viewport.

<div class=”full-pagina-element”>
<button>Knop</button>
</div>
.full-pagina-element {
hoogte: 100vh;
position: relative;
}

.full-pagina-element knop {
position: absolute;
bottom: 10px;
left: 10px;
}

Je zou verwachten dat de knop in de afbeelding zichtbaar is (ervan uitgaande dat dit element aan de bovenkant van de pagina, en u nog niet verschoven) omdat het langs de onderkant van een 100vh element. Maar het is eigenlijk verborgen achter de browser chrome in mobiele browsers, waaronder iOS Safari of Android en Chrome.

Ik gebruik dit veel:

body {
hoogte: 100vh; /* Leuk om niet na te denken over de HTML-element ouder */
margin: 0;
}

Het is gewoon een snelle manier om ervoor te zorgen het lichaam is de volledige hoogte, zonder tussenkomst van andere elementen. Ik ben meestal om dat te doen op vrij low-stakes demo soort dingen, maar ik ben vertelde zelfs dat is een beetje problematisch, omdat u misschien ervaring jumpiness als browser chrome verschijnt en verdwijnt, of dingen die misschien niet zo gecentreerd als je zou verwachten.

Je zou denken dat je zou kunnen doen body { height: 100% }, maar er is een gotcha er ook. Het lichaam is een kind van <html> dat is slechts zo groot als de inhoud die het bevat, net als elk ander element.

Als u het lichaam om de volledige hoogte, heb je te maken met het HTML-element:

html, body {
height: 100%;
}

…die is niet zo groot van een deal, en heeft betrouwbare cross-browser consistentie.

Het is de positionering van de dingen langs de onderrand dat is lastig. Het is problematisch vanwege position: absolute; binnen de “volledige hoogte” (vaak groter-dan-zichtbare) container.

Als u probeert om plaats iets als een vaste navigatie balk aan de onderkant van het scherm, zou je waarschijnlijk doen dat met position: fixed; bottom: 0; en die goed lijkt te werken. De browser chrome duwt het omhoog en omlaag als je zou verwachten (video).

Horizontale viewport eenheden zijn net zo raar en problematisch als gevolg van een ander deel van de browser-UI: schuifbalken. Als een browser-venster heeft een scrollbar zichtbaar, dat de scrollbar wordt meestal eten in de visuele ruimte hoewel een waarde van 100vw is berekend als de scrollbar was er niet. In andere woorden, 100vw zal leiden tot horizontaal scrollen op een manier die je waarschijnlijk niet zou verwachten.

Zie de Pen
CSS Vars voor viewport breedte min scrollbar door Shaw (@shshaw)
op CodePen.

Onze laatste CSS verlanglijstje roundup vermeld betere viewport eenheid hanteren een aantal keer, zodat ontwikkelaars zijn vrij duidelijk geïnteresseerd in het hebben van betere oplossingen voor deze dingen. Ik weet niet wat dat zou betekenen voor web compatibiliteit hoewel, omdat het veranderen van de manier waarop ze werken kan breken alle oplossingen die we hebben gebruikt die zijn zeker nog in het wild.