Я завжди стикаюся з труднощами, коли необхідно розтягнути блок на 100% висоти сторінки. Наприклад, у мене є блок div, який необхідно розтягнути, проте все трохи складніше, ніж здається. Отже, чому б не знайти кросбраузерності рішення по розтягуванню блоку на всю висоту сторінки? Сьогодні ми спробуємо знайти це рішення.
Скажімо, у вас є html-файл на зразок такого:
HTML
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <meta http-equiv =" Content-Type "content =" text / html; charset = windows-1251 "/> <title> CSS 100% Height </ title> <link rel = "stylesheet" type = "text / css" href = "style.css" /> </ head> <body> <div id = "content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod ..... коротше багато контенту </ div> </ body> </ html>
До нього додається CSS:
CSS
body {margin: 0; padding: 0; } #Content {background: #EEE; border-left: 1px solid # 000; border-right: 1px solid # 000; padding: 0 20px 0 20px; margin: auto; font: 1.5em arial, verdana, sans-serif; width: 960px; height: 100%; }
Що це нам дає, ви можете побачити перейшовши по:
Як ви можете бачити, висота сторінки визначається контентом і не розтягується на 100%, незважаючи на те, що ми додали блоку #content властивість height зі значенням 100%. Як так? Давайте трохи поміркуємо про HTML. HTML - це всього лише купа контейнерів вкладених один в іншій. Отже, у нашій сторінки спершу йде контейнер html, потім всередині контейнера html лежить контейнер body, ну і, нарешті, в body розташований блок з ідентифікатором content. Коли ми поміщаємо контент в один з цих блоків, він розтягує цей блок і всі інші блоки, що містять цей блок. Отже, ми розтягуємо блок <div id = "content">, коли поміщаємо в нього текст, цим, в свою чергу, ми розтягуємо інші блоки (в нашому випадку це блоки body і html).
Додаючи блоку <div id = "content"> оголошення height: 100%, ми говоримо: блок div id = "content» потрібно розтягнути на всю висоту блоку-батька. У нашому прикладі, як ви розумієте, цим блоком-батьком є тег body. Отже, висота блоку div id = "content» дорівнює повній висоті (100%) тега body. Добре, але яка висота у тега body? Все просто: висота тега body дорівнює висоті блоку <div id = "content">, яку ми ніде не задавали! Тому, коли ми створюємо оголошення height: 100%, ми просто говоримо: блок по висоті повинен бути рівний самому собі!
Щоб виправити це, нам потрібно призначити тегу body свою висоту. Але ми знову зіткнемося з тією ж проблемою, адже тег body лежить в тезі html. Таким чином, щоб розтягнути блок <div id = "content"> на всю висоту вікна браузера, нам необхідно тегам body і html задати висоту, яка відповідала б повною висоті сторінки.
CSS
html {height: 100%; } Body {margin: 0; padding: 0; height: 100%; } #Content {background: #EEE; border-left: 1px solid # 000; border-right: 1px solid # 000; padding: 0 20px 0 20px; margin: auto; font: 1.5em arial, verdana, sans-serif; width: 960px; min-height: 100%; } / * Спеціально для IE * / * html #content {height: 100%; }
І на цьому все. Подивіться demo. Блок з контентом розтягується на всю висоту вікна браузера.
Зверніть увагу на оголошення min-height: 100% ;: завдяки йому в разі, якщо контент виходить за межі вікна браузера, фон також буде розтягуватися за контентом.
Не забуваємо і про старих браузерах IE, які не розуміють властивість min-heigt, для них необхідно додати * html #content {height: 100%;}.
використано матеріали статті
Як так?Добре, але яка висота у тега body?
