Eng allgemeng Ufro gefrot Froe am Webdesign ass "wéi fuert Dir d'Héicht vun engem Element op 100%"?
Dëst ka vläicht wéi eng einfach Äntwert. Dir benotze CSS fir d'Héicht vun engem Element op 100% ze setzen, awer dëst net ëmmer dat Element ze strecken fir de ganze Browserfenster ze passen. Loosst Iech erausfannen, firwat dat passéiert a wat Dir maache kënnt fir dëse visuellen Stil ze erreechen.
Pixelen a Prozent
Wann Dir d'Héicht vun engem Element mat der CSS-Eigenschaft definéiert an e Wäert deen Pixel benotzt, da wäert dëse Element vill vertikal Plaz am Browser sinn.
Zum Beispill e Paragraf mat enger Héicht: 100px; Dir braucht 100 Pixel vu vertikaler Plaz an Ärem Design. Et ass egal wéi grouss Är Browserfenêt ass, ass dëst Element 100 Pixel an der Héicht.
De Prozentsaatz fonktionnéieren anescht wéi Pixel. Laut der W3C-Spezifikatioun prozentual Héichten ginn an der Héicht vum Container berechent. Also wann Dir e Paragrapar mat enger Héicht: 50%; An engem Div an enger Héicht vun 100px gëtt de Paragraphe 50 Pixelen an der Héicht, wat 50% vum Elterendeel ass.
Firwat Prozentsatz Héichte klappt
Wann Dir eng Websäit entwéckelt, an Dir hutt eng Kolonn déi Dir gitt op d'ganz Héicht vun der Fënster opmaachen, ass déi natierlech Nuecht fir eng Héicht: 100%; dem Element. Wann Dir d'Breet op d'Breet festgeluegt: 100%; D'Element wäert den kompletten horizontalen Raum vun der Säit erofhuelen, sou datt d'Héicht d'selwecht wäert ass, richteg? Leider ass dat net de Fall.
Fir ze verstoen firwat dat passéiert, musst Dir verstoen, wéi Browser d'Héicht an d'Breet interpretéieren. Webbrowser rechnen déi Gesamtbreet wéi eng Funktioun vu wéi wäit d'Browser-Fënster opgemaach gëtt. Wann Dir keng Breet-Wäerter op Är Dokumenter festleet, de Browser automatisch d'Inhalter fir déi ganz Breet vun der Fënster ze fëllen (100% Breed ass Standard).
Héich Wierk gëtt anescht wéi d'Breet berechent. Inexistéierend Browser bréngen d'Héicht net an der Ausgab aus, ausser datt de Inhalt esou laang ass datt et dobausse vum Betrag erausgeet (also Scrollbalken) oder wann de Webdesigner e absolute Héicht fir e Element op der Säit geséit. Sinn d'Browser einfach léisst de Inhalt fléissen an der Breet vum Viséieren bis en Enn geet. D'Héicht gëtt tatsächlech net berechent.
Probleemer passéieren wann Dir eng prozenthall Héicht op e Element setzt, deen Elteren ouni Héichten huet huet - an anere Wierder, déi Elterelementer hunn eng Standardhéichheeten: Auto; . Dir sidd effektiv den Browser frot, eng Héicht vun engem onefinéierten Wäert ze berechnen. Well dat wärten e Null-Wäert, dat Resultat ass datt de Browser näischt schreift.
Wann Dir eng Héicht op de Websäiten op ee Prozentsatz setze wëllt, musst Dir d'Héicht vun all Elterendeel vun der gewënden, déi Dir misst d'Héicht definéieren. An anere Wierder, wann Dir eng Säit hutt:
Inhalt hei
Dir wäert wahrscheinlech datt den Div an den Paragraphe an der et 100% héich sinn, awer datt div divert zwee zwou Elementer huet:
an. Fir d'Héicht vun der div zu enger relativer Héichte festzeleeën, musst Dir d'Héicht vum Kierper a HTML Elementer setzen.
Also musst Dir CSS benotze fir d'Héicht vun net nëmmen d'Div opzemaachen, awer och d'Kierper a HTML Elementer. Dëst kann eng Erausfuerderung sinn, well Dir kënnt séier mat iwwer 100% Héicht séier iwwerwältegt ginn, fir nëmmen déi gewënschten Effekt ze erreechen.
E puer Saachen zu Beméien Wann Dir mat 100% Héichten aarmt
Elo, datt Dir wësst wéi Dir d'Héicht vun den Elementer vun der Säit op 100% setzen léisst, kann et spannend sinn, datt Dir op all Är Säiten goe wëllt, awer et sinn e puer Saachen déi Dir kennt:
- Margren a Fëllementer kann e Scrollbar erofhuelen wou Dir keng wëllt. Eent vun de lästegsten Saachen, déi ech fonnt hunn mat Prozesserhöhe (a Breed), ass dat dann d'Padding an d'Margen op déi selwecht Elementer woubäi Scrollbarren op der Säit kënnen addéieren, obwuel all den Inhaltszeechen ouni Scrollbalken ze hunn. Dëst ass wéinst der Héicht oder Breet vum Element déi éischt Saach, déi berechent gëtt. Dann sinn d'Ränner a Paddings dobäi opgesat. Also wann Dir e Element mat enger Héicht vun 100% an Top- a Gréisst Margen vun 10 Pixelen huet, da gëtt e Scrollbar fir déi extra 20 Pixelen. Vergiesst net datt d'CSS Box Modell d'Margin, d'Grenz an d'Uweisung op d'Gréisst vun engem Element addéiere kënnt, sou datt 100% mat engem vun deenen anere Boxmodell Wäerter méi wéi 100% sinn.
- Wann Ären Inhalt méi wéi d'definéiert Héicht ass, gëtt et no eppes iwwerschreiwen. An anere Wierder, wann Dir e Design mat enger Kolonn huet, déi 80% an der Héicht ass, an den Inhalt dat am Bann dohinner wäert 100% vun der Héicht huelen, datt extra 20% wäerten ënner der Kolonn féieren an de visuelle Design vun Ärer Säit. Wann et Inhalter ënnert der Spalt gëtt, schreift de Text einfach iwwer d'Spëtzt. Ech gesinn oft dat geschitt, wann e Webdesigner versprécht d'Héichstellung vun enger Säit ze kräizen an seet se et perfekt fir de Start ze gewannen, awer wann Inhalt op dëser Säit Ännerungen an der Zukunft gëtt, hunn hir absolute Héichten total de Floss vun der Säit duerchbriechen. Dëst ass dofier true wann Dir reagéiert Websäiten opbaut, woubäi d'Breet an d'Héicht mat der Gréisst vum Viewport geännert ginn.
Fir dëst ze fixéieren, da kënnt Dir d'Héicht vun deem Element setzen. Wann Dir et fir Auto geséit, scrollbar Bäll ersat, wann se gebraucht ginn, awer verschwannen wann se net sinn. Dat fixéiert d'visuell Paus, awer et fënnt d'Scrollbars wou Dir et net wëllt.
Benotzt Viewport Units
Eng aner Manéier déi Dir dës Erausfuerderunge maache kann ass experimentéiert mat CSS Viewport Units Experiment. Duerch d' Héicht vun der Héich Héicht vun der Iwwerwaachung kënnt Dir Elementer gréissen fir eng definéiert Héicht vun dem Betrag z'ënnerhuelen, a wa mer ännert wéi de Betraff geännert! Dëst ass eng super Manéier fir Är 100% héich Visualiséierungen op enger Säit z'erreechen, awer ëmmer nach ze flexibel sinn fir verschidde Apparater a Screenshots.