Css 100% висота

Я завжди стикаюся з труднощами, коли необхідно розтягнути блок на 100% висоти сторінки. Наприклад, у мене є блок div. який необхідно розтягнути, проте все трохи складніше, ніж здається. Отже, чому б не знайти кросбраузерності рішення по розтягуванню блоку на всю висоту сторінки? Сьогодні ми спробуємо знайти це рішення.

Скажімо, у вас є html-файл на зразок такого:

До нього додається CSS:

Що це нам дає, ви можете побачити перейшовши по:

Як ви можете бачити, висота сторінки визначається контентом і не розтягується на 100%, незважаючи на те, що ми додали блоку #content властивість height зі значенням 100%. Як так? Давайте трохи поміркуємо про HTML. HTML - це всього лише купа контейнерів вкладених один в іншій. Отже, у нашій сторінки спершу йде контейнер html. потім всередині контейнера html лежить контейнер body. ну і, нарешті, в body розташований блок з ідентифікатором content. Коли ми поміщаємо контент в один з цих блоків, він розтягує цей блок і всі інші блоки, що містять цей блок. Отже, ми розтягуємо блок