Întotdeauna am rula în dificultate atunci când este necesar să se întindă blocul de până la 100% din înălțimea paginii. De exemplu, am un bloc div. care ar trebui să fie întins, dar un pic mai complicat decât pare. Deci, de ce să nu găsească o soluție pentru compatibilitate cross-browser unitate se întinde pe întreaga lungime a paginii? Astăzi, vom încerca să găsim soluția.
Să presupunem că aveți un fișier HTML ca aceasta:
Atașat este CSS:
Ea ne dă, puteți vedea făcând clic pe:
După cum puteți vedea, pagina este determinată de înălțimea conținutului și nu se întinde până la 100%, în ciuda faptului că am adăugat o înălțime de proprietate bloc #content cu o valoare de 100%. Cum așa? Să reflecteze: HTML. HTML - este doar o grămadă de containere imbricate una în alta. Deci, prima noastră pagină este un container html. html apoi în interiorul containerului este corpul recipientului. și, în final, un conținut de identificator de bloc corp localizat. Când am pus conținutul unuia dintre aceste blocuri, se întinde de bloc și alte blocuri care conțin bloc. Deci, ne-am întinde unitate
Pentru a remedia acest lucru, trebuie să desemneze un organism etichetați înălțimea dumneavoastră. Dar, din nou, ne confruntăm cu aceeași problemă, deoarece tag-ul corpului se află în interiorul tag-ul HTML. Astfel, pentru a întinde unitate
Și asta e. A se vedea demo. blocul de conținut se extinde pe toată înălțimea ferestrei browser-ului.
Nu uita despre vechile browsere IE care nu înțeleg min-proprietate de inaltime. pentru ei, trebuie să adăugați * #content html.