100% magassága egy weboldal segítségével css

Nem tudom, hogy bárki, de én néha gondok vannak a tény, hogy a weboldal vesz teljes magasságban. Van egy div, szeretnék, hogy nyúlik a teljes magassága az oldalt. De ez nem nyúlik. Miért? Ma én, veletek együtt, megpróbálom kitalálni.

Mondjuk ezt HTML:

És ez a CSS (a style.css fájlban):

Meg tudja nyitni a HTML böngésző látni, hogy div nem nyúlt a teljes magassága az oldalon, még akkor is jelezték, „height: 100%;” CSS. Miért kérdezed?

Az a tény, hogy a HTML egyszerűen gyűjteménye konténerek, beágyazott. Honlapunkon van egy gyökér konténer , tartalmaz , és ez viszont a tartály

. Amikor fel a tartalmat az egyik tartály, ő (és az összes konténer tartalmazó) megnyúlnak, hogy elférjenek azok tartalmát. Azaz, ha tesszük a szöveget

, Kinyújtózott, így nyúlik a konténereket, amelyben található (ebben az esetben, és ).

Ha ehhez hozzátesszük a szabály "min-height: 100%;" a

. Mi alapvetően támogatja a csodát, hogy tartson a teljes magassága a tartály. Ebben a példában, egy konténer . Így, a tartály

Azt kezdte elfoglalni 100% a tartály magassága . Most az a kérdés merül fel, és milyen magasságban konténer ? Sőt, mint például. mert a másik nem volt megadva! Azaz, sőt, hozzátéve stílus "min-magasság: 100%;"

Ez azt mutatja, hogy legyen azonos magasságban van.

Így annak érdekében, hogy elérjék a kívánt eredményt, meg kell növelni a magassága a tartály . Itt állunk szemben ugyanaz a probléma egy tartályban - magassága a magasság ! Így annak érdekében, hogy megoldja a problémát (azaz, hogy a tartály

nyúlik a teljes magassága az oldalt), meg kell, az említett tartály és , hogy elfoglalták az egész magassága az oldalt.

Ez azt jelenti, hogy módosítsa a CSS a következő:

Az eredmény az, hogy az oldal tartalma kerül a teljes magassága. Fontos tény, ha a tartalom magassága nagyobb, mint a magassága az oldalon, egy görgetősáv jelenik meg. Erre a célra, ahelyett, magasság: 100%; használt az utolsó sorban min-magasság: 100%;. Ellenkező esetben a tartalom megszűnne az oldal végén.

Kapcsolódó cikkek

előző ◈ a következő