A HTML elem magasságának beállítása 100%

Egy gyakran feltett kérdés a weboldal tervezésében: "hogyan állíthatja be az elem magasságát 100% -ra"?

Ez könnyű válasznak tűnhet. A CSS segítségével egyszerűen beállíthatja az elem magasságát 100% -ra, de ez nem mindig nyújtja az elemet a teljes böngészőablakhoz. Találjuk meg, hogy miért történik ez, és mit tehetünk e vizuális stílus elérése érdekében.

Pixelek és százalékos értékek

Ha egy elem magasságát a CSS tulajdonság és a képpontok használatával határozza meg, akkor az adott elem a függőleges sávot a böngészőben veszi fel. Például egy bekezdés a

magasság: 100px;

100 képpontnyi függőleges helyet foglal el. Nem számít, mennyire nagyobb a böngészőablak, ez az elem 100 pixeles magasságú lesz.

A százalékok eltérően működnek, mint a képpontok. A W3C specifikáció szerint a százalékos magasságokat a tartály magasságához viszonyítva számítják ki. Tehát, ha egy bekezdést helyez el a

magasság: 50%;
100px magasságú div alatt a bekezdés 50 képpontos magasságú lesz, ami a szülőelem 50% -a.

Miért nem érik el a százalékos magasságok?

Ha weboldalt tervezel, és van egy olyan oszlopod, amelyik az ablak teljes magasságát szeretné felvenni, a természetes hajlam az, hogy hozzáadjunk egy

magasság: 100%;
ezt az elemet. Végül is, ha beállítja a

szélesség
nak nek

szélesség: 100%;
az elem veszi fel az oldal teljes vízszintes részét, így

magasság
ugyanúgy kell működnie, ugye? Sajnos ez egyáltalán nem így van.

Annak megértéséhez, hogy ez miért történik meg, meg kell értened, hogy a böngészők hogyan értelmezik magasságukat és szélességüket. A webböngészők kiszámítják a rendelkezésre álló teljes szélességet a böngészőablak megnyitásának függvényében.

szélesség
Ha nem állít be semmilyen értéket a dokumentumain, akkor a böngésző automatikusan továbbítja a tartalmat, hogy kitöltse az ablak teljes szélességét (100% -os szélesség az alapértelmezett).

A magasság értékét a szélességtől eltérő módon kell kiszámítani. Valójában a böngészők egyáltalán nem értékelik a magasságot, hacsak a tartalom olyan hosszú, hogy a nézetablakon kívülre kerül (így görgetősávokat igényel), vagy ha a webtervező abszolút értéket határoz meg az oldal egy elemére.

magasság
Ellenkező esetben a böngésző egyszerűen lehetővé teszi a tartalom áramlását a nézetablak szélességében a végéig. A magasságot egyáltalán nem számolják.

Problémák fordulnak elő, ha olyan elemet állít be egy olyan elemre, amelynek van szülőeleme magasság nélkül - más szavakkal, a szülőelemek alapértelmezettek.

magasság: automata;
Valójában arra kérte a böngészőt, hogy kiszámítsa a magasságot egy nem meghatározott értékről. Mivel ez nulla értéket jelent, az eredmény az, hogy a böngésző nem csinál semmit.

Ha weboldalaink magasságát egy százalékra szeretné beállítani, akkor meg kell adnia a magasságát minden annak a szülő elemnek, amelyik a magasságot kívánja meghatározni. Más szavakkal, ha van ilyen oldalod:

Tartalom itt
Valószínűleg a

div
és a bekezdésben 100% -os magasság, de ez a div valójában két szülőelemek:

és. Annak érdekében, hogy meghatározza a

div
egy relatív magassághoz kell beállítania

test
és

html
elemeket is. Tehát a CSS használatával meg kell határoznia nem csak a div, hanem a test és a HTML elemek magasságát is. Ez kihívást jelenthet, mivel gyorsan el lehet túlszárnyalni mindent, ami 100% -os magasságra van beállítva, csak ennek a kívánt hatásnak a eléréséhez.

Néhány dolgot meg kell jegyezni, ha 100% -os magasságban dolgozik

Most, hogy tudod, hogyan állíthatom be az oldalelemek magasságát 100% -ra, izgalmas lehet, hogy kijön, és megteszi az összes oldalt, de van néhány dolog, amiről tudnia kell:

A margók és a párnázás hozzáadhat egy görgetősávot, ahol nem kívánja.Az egyik legbosszantóbb dolog, amit a százalékos magasságok (és a szélességek) használatával tapasztaltam, az az, hogy az ugyanazon elemek párnázata és margója görgetősávokat adhat hozzá az oldalhoz, annak ellenére, hogy az összes tartalom megjelenik görgetősáv nélkül. Ez azért van, mert az elem magassága vagy szélessége az első dolog, amelyet kiszámítanak. Ezután hozzáadják a margókat és a lapokat. Tehát ha van egy eleme, amelynek magassága 100%, a felső és az alsó margó 10 pixel mindegyik, egy görgetősáv lesz a további 20 képpontnál. Ne felejtsük el, hogy a CSS doboz modell egy margóhoz, szegélyhez és kitöltéshez ad egy elem méretét, így a többi doboz modell értékeinek 100% -a valójában több mint 100%.

Ha a tartalma meghaladja a megadott magasságot, felülírja a tartalmat.Más szóval, ha egy 80% -os magasságú oszlopot használ, és a benne lévő tartalom a magasság 100% -át teszi ki, akkor az extra 20% az oszlop alatt folytatódik, és megtöri a vizuális tervet az oldalad. Ha az oszlop alatt található tartalom van, a szöveg egyszerűen felül fogja írni. Gyakran látom ezt, amikor egy webdesigner megpróbálja kényszeríteni az oldal magasságát, és tökéletesen működik az indításhoz, de ha az oldal tartalmát a jövőben megváltoztatja, abszolút magassága teljesen megtöri az oldal áramlását. Ez kétszeresen igaz, amikor olyan érzékeny weboldalakat hoz létre, amelyek szélessége és magassága a nézetablak méretével változik.

Ennek megjavításához beállíthatja az elem magasságát is. Ha beállítottad

auto,
görgetősávok jelennek meg, ha szükségesek, de eltűnnek, ha nem.Ez megjavítja a vizuális szünetet, de hozzáadja a görgetősávokat, ahol esetleg nem szeretné őket.

Viewport egységek használata

Egy másik módja ennek a kihívásnak a kezelése, hogy kísérletezzen a CSS Viewport egységekkel. A nézetmagasság mértékegységének használatával méretezhet elemeket a nézetablak meghatározott magasságához, és ez megváltozik, ahogy a nézetablak megváltozik! Ez egy nagyszerű módja annak, hogy 100% -os magasságú képet jelenítsen meg egy oldalon, de még mindig rugalmas legyen a különböző eszközökhöz és képernyőméretekhez.