A CSS használata a HTML-elem magasságának 100% -ra állításához

click fraud protection

Százalékos értékek CSS trükkös lehet. Amikor beállítja a magasságot CSS tulajdonság egy elem 100% -ra, pontosan mit állít be 100% -ra? Ez a fő kérdés, amelybe beletartozik, amikor a CSS-ben százalékkal foglalkozik, és amint az elrendezések összetettebbé válnak, ez is sokkal nehezebb követni a százalékokat, ami egyenesen furcsa viselkedést eredményez, ha nem óvatos.

A százalékos munkavégzésnek kifejezetten előnye van; a százalékos elrendezések automatikusan alkalmazkodnak a különböző képernyőméretekhez. Ezért a százalékok használata elengedhetetlen az adaptív tervezés során. A népszerű rácsrendszerek és a CSS keretrendszerek százalékos értékeket használnak az adaptív rácsok létrehozásához.

Nyilvánvaló, hogy vannak olyan helyzetek, amelyek jobban megfelelnek a statikus értékeknek, és mások, amelyek sokkal jobban működnek valami adaptív dologgal, például a százalékokkal. El kell döntenie, hogy melyik utat választja a terv elemeivel.

Statikus egységek

A pixelek statikusak. Tíz pixel egy eszközön tíz képpont minden eszközön. Persze vannak olyan dolgok, mint a sűrűség, és az, ahogyan egy eszköz ténylegesen értelmezi a pixelt, de soha nem fog nagyobb változásokat látni, mert a képernyő más méretű.

instagram viewer

A CSS segítségével egyszerűen meghatározhat egy elemet magasság pixelben, és ugyanaz marad. Ez kiszámítható.

div {
magasság: 20px;
}

Ez nem változik, hacsak nem változtatja meg JavaScript-sel vagy valami hasonlóval.

Van ennek az éremnek egy másik oldala. Nem fog változni. Ez azt jelenti, hogy mindent pontosan ki kell mérnie, és akkor sem fog webhelye minden eszközön működni. Ezért a statikus egységek jobban működnek a gyermekelemeknél, médiáknál és olyan dolgoknál, amelyek torzulni és furcsának tűnnek, ha megnyúlnak és növekednek.

Az elem magasságának 100% -ra állítása

Ha egy elem magasságát 100% -ra állítja, akkor az a képernyő teljes magasságára kiterjed? Néha. A CSS a százalékértékeket mindig a szülőelem százalékaként kezeli.

Szülői elem nélkül

Ha létrehoztál egy frisset ezt csak a webhely törzscímkéje tartalmazza, 100% valószínűleg egyenlő a képernyő magasságával. Ez az, hacsak nem adott meg magasságértéket a.

A HTML:




A CSS:

div {
magasság: 100%;
}
A CSS elem magassága 100% -ban nincs szülő

Hogy Az elem magassága megegyezik a képernyő magasságával. Alapértelmezés szerint a átfogja a teljes képernyőt, tehát a böngésző ezt használja az elem magasságának kiszámításához.

Statikus magasságú szülői elemmel

Ha az elem beágyazódik egy másik elembe, akkor a böngésző a szülőelem magasságát használja a 100% -os érték kiszámításához. Tehát, ha az elem egy másik elemben van, amelynek magassága 100 képpont, és a gyermek elem magasságát 100% -ra állítja. A gyermekelem 100 képpont magas lesz.

A HTML:






A CSS:

#parent {
magasság: 100px;
}
#child {
magasság: 100%;
}
CSS elem 100% magassággal és 20em szülővel

A gyermek elem számára elérhető magasságot a szülő magassága korlátozza.

Százalékos magasságú szülői elemmel

Ellen intuitívnak tűnhet, de az elem magasságát beállíthatja egy százalék százalékra. Ha egy elemnek van olyan szülőeleme, amelynek magasságát szintén százalékos értékként határozza meg, a böngésző ugyanazt az értéket fogja használni, mint a szülő, amelyet már a szülője alapján kiszámított. Ez azért van, mert az érték 100% -a még mindig ez az érték.






A CSS:

#parent {
magasság: 75%;
}
#child {
magasság: 100%;
}
A CSS elem magassága 100% a szülő százalékában

Ebben az esetben a szülőelem magassága a teljes képernyő 75% -a. A gyermek tehát szintén a rendelkezésre álló teljes magasság 100% -át teszi ki.

Magasság nélküli szülői elemmel

Érdekes módon, ha a szülő elemnek nincs meghatározott magassága, a böngésző szintről szintre emelkedik, amíg meg nem talál egy konkrét értéket, amellyel együtt tud működni. Ha ez egészen a anélkül, hogy bármit is találna, a böngésző alapértelmezés szerint a képernyő magasságát adja meg, ezzel az elemnek megfelelő magasságot adva.

A HTML:






A CSS:

#parent {}
#child {
magasság: 100%;
}
CSS elem 100% magassággal és meghatározatlan szülőmagassággal

A gyermekelem egészen a képernyő felső és alsó részéig terjed.

A nézetablak egységei

Mivel a százalékos egységekkel történő számítás bonyolult lehet, és minden elem a szülőjéhez van kötve, van egy sor egység, amely figyelmen kívül hagyja mindazt, és az alapelemek méretét közvetlenül a rendelkezésre álló képernyőn kívül tér. Ezek a nézetablakok, és közvetlen méretet adnak a képernyő magassága vagy szélessége alapján, függetlenül attól, hogy az elem hol található.

Egy elem beállításához magasság egyenlő a képernyő magasságával, állítsa a magasság értékét 100vh.

div {
magasság: 100vh;
}
CSS elem nézetablak magassággal és meghatározott szülővel

Ezzel könnyen el lehet törni az elrendezést, és tisztában kell lennie azzal, hogy mely elemek lesznek még hatással van, de a nézetablak messze a legközvetlenebb módja annak, hogy az elem magasságát a képernyő.

instagram story viewer