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 magassága: 100px; 100 képpontnyi függőleges helyet vesz fel a designban. Nem számít, mennyire nagyobb a böngészőablak, ez az elem 100 pixel 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 egy magassággal: 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, amelybe az ablak teljes magasságát szeretnéd felvenni, akkor a természetes hajlam hozzáadásához: 100%; ezt az elemet. Végül is, ha a szélességet szélességre állítja: 100%; az elem veszi fel az oldal teljes vízszintes mezőjét, így a magasságnak ugyanazt 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. Ha nem állít be szélességi értékeket a dokumentumokon, akkor a böngésző automatikusan átadja 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 számítjuk ki. Valójában a böngészők egyáltalán nem értékelik a magasságot, hacsak a tartalom annyira hosszú, hogy a nézetablakon kívülre kerül (így görgetősávokat igényel), vagy ha a webtervező abszolút magasságot határoz meg az oldal egy elemére. 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 szülőelemei nincsenek beállítva - más szavakkal, a szülőelemek alapértelmezett magassága: auto; . 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 a weblapjainak magasságát egy százalékra szeretné állítani, meg kell adnia a magasság minden szülőelemének magasságát. Más szavakkal, ha van ilyen oldalod:
Tartalom itt
Valószínűleg azt szeretné, ha a div és a bekezdés egy 100% -os magasságban lenne, de a divnak ténylegesen két szülőeleme van:
és. A div magasságának viszonylagos magassághoz történő meghatározásához meg kell adnia a test és a html elemek magasságát is.
Tehát a CSS-nek nemcsak a div, hanem a test és a html elemek magasságának beállításához is szüksége lenne. 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 szélességek) használatával tapasztaltam, az az, hogy az ugyanazon elemek párnázata és margója gördítő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 automatikusra állítja, a 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.