Css 100% magasság
Mindig bajba, ha szükség van, hogy nyúlik a blokk 100% -a az oldal magassága. Például, van egy div blokk. ami kell feszíteni, de egy kicsit bonyolultabb, mint amilyennek látszik. Szóval, miért nem talál megoldást a határon böngésző kompatibilitás nyújtás egység teljes hossza az oldalt? Ma megpróbáljuk megtalálni a megoldást.
Tegyük fel, hogy van egy html-fájlt, mint ez:
Mellékelve CSS:
Ez ad nekünk, akkor láthatjuk kattintva:
Mint látható, az oldal magassága határozza meg a tartalmat, és nem nyúlik 100%, annak ellenére, hogy van hozzá egy blokk #content magasság ingatlan értéke 100%. Hogy érti ezt? Nézzük gondolkozzanak: HTML. HTML - ez csak egy rakás beágyazott konténerek egymásba. Tehát, az első oldal egy html tartályba. html, majd a tartály belsejében van a tartály testének. és végül a test blokkjának azonosítót tartalmat. Amikor fel a tartalmat egy ilyen blokk, akkor nyúlik a blokk és a többi blokk tartalmazza a blokk. Tehát nyúlik egység
A probléma kiküszöbölése érdekében van szükség, hogy jelöljön ki egy body címke a magasság. De megint állunk szemben ugyanaz a probléma, mert a body tag belül fekszik tag html. Így, hogy nyúlik egység
És ennyi. Lásd demo. Tartalom blokk teljes egészére kiterjed magassága a böngésző ablakot.
Ne feledkezzünk meg a régi IE böngészők, hogy nem értik min-heigt tulajdon. nekik, meg kell adnia * html #content.