Як притиснути футер. Як розтягнути блок div.
Добрий день, шановні відвідувачі мого блогу . Сьогодні поговоримо про двох поширених проблемах, з якими стикаються верстальники при верстці макетів сайтів. Однією з проблем є завдання притиснення футера до низу екрану. Суть завдання полягає в тому, щоб при різних дозволах монітора футер був притиснутий до низу вікна браузера в разі, коли середня (тематична) частина сайту містить невеликий обсяг контенту.
Притискати, і розтягувати будемо засобами CSS , Можна сюди залучити java script, але навіщо, якщо це можна зробити простіше і елегантніше. Рішення подібних проблем за рахунок ява коду має один очевидний недолік, ява скрипт можна відключити в браузері і верстка попливе.
Подібні завдання я вже вирішував раніше, але кожен раз доводилося за новою шукати інформацію як притиснути футер і розтягнути блок div, тому, що не розумів суті.
Притискаємо футер до низу сторінки.
Початково маємо якусь html сторінку представлену кодом: <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html> <head> <style type =" text / css "> body, html {padding: 0; margin: 0;} body {background: #ddd;} #wrapper {width: 200px; margin: auto;} #header {background: # CC3366; width: 100%; height: 50px;} #content {width: 100%; background: #fff; } #Footer {width: 100%; background: # 000; color: #fff; height: 50px;} </ style> </ head> <body> <div id = "wrapper"> <div id = "header"> шапка </ div> <div id = "content"> основний текст сайту </ div> <div id = "footer"> підвал </ div> </ div> </ body> </ html>контейнер body має сірий колір, всередині нього лежить обгортка (#wrapper) шириною 200 пікселів, рівняння по центру. Усередині обгортки послідовно зверху вниз розташовані три блоки: #header - шапка, рожевого кольору; #content - змістовна частина сайту з фоном білого кольору; #footer - підвал чорного кольору. Висота шапки і підвалу прийнята 50 пікселів. Висота контентної частини варіюється по вмісту. Візуально це виглядає наступним чином.
Для початку потрібно винести блок футера за межі обгортки (#wrapper). Потім для контейнерів html, body, #wrapper встановити висоту 100% (height: 100%). Після цього з'явиться смуга прокрутки, а футер буде розташований нижче видимої частини вікна браузера.
Щоб піти від цього непорозуміння, встановимо для футера негативний межблочний відступ по вертикалі рівний висоті футера (margin: -50px auto; - зміщуємо вгору на 50 пікселів. І вирівнюємо по центру). Тепер у нас футер наповзає на блок обгортки і на блок контенту в разі якщо висота відповідає. Зробимо для блоку контенту внутрішньоблокові відступ знизу 50px, тепер все виглядає красиво.
Поки цей варіант працює в "правильних" браузерах (я перевіряв в opera, firefox, google chrome і IE 8). У недобраузере ИЕ 6 не перевіряв працездатність, в ИЕ 7 по ідеї повинно працювати.
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type = "text / css"> body, html {padding: 0; margin: 0; height: 100%;} body {background: #ddd; min-height: 100%; height: 100%; position: relative; } #Wrapper {width: 200px; margin: auto; height: 100%;} #header {background: # CC3366; width: 100%; height: 50px;} #content {width: 100%; background: #fff; padding-bottom: 50px; } #Footer {width: 200px; margin: -50px auto; background: # 000; color: #fff; height: 50px;} </ style> </ head> <body> <div id = "wrapper"> <div id = "header"> шапка </ div> <div id = "content"> основний текст сайту </ div> </ div> <div id = "footer"> підвал </ div> </ body> </ html>Як розтягнути блок div по висоті батьківського блоку
Власне ми вже це зробили, блок #wrapper розтягнутий по висоті на 100% контейнера body. Проблема полягає трохи в іншому, на малюнку нижче видно, що білий фон контенту не дотягується до футера, а між контентом і футером з'явився сірий фон. Щоб цього уникнути можна задати для обгортки такий же колір як і для блоку контенту (#wrapper {background: #fff;}).UPD: 3.04.2014
Утворився якийсь, нібито пробіл в подачі інформації. Спробую заповнити. Суть в тому, що в коментах є зауваження на тему що контент не розтягнуто як обіцялося. По-перше в статті не йдеться про те, що потрібно ратягівать блок контенту. По-друге в статті блок wrapper розтягнутий на висоту блоку body, про що сказанно в заголовку (як розтягнути блок по висоті), що й треба було довести. Вирішувати якусь універсальну завдання я перед собою не ставив, це в принципі не можливо.
Але щоб показати вам, що всі проблеми вирішуються покажу як "розтягнути" ще й блок контенту. Відразу обмовлюся, безпосередньо в блокової моделі неможливо без javaScript расятнуть один блок до іншого блоку, зробити це можна тільки на 100% висоту. Без яваскрипт питання вирішується таблицею. Робите 3 осередки по вертикалі (шапка, контент, підвал). Якщо обмежити висоту шапки і підвалу, а висоту таблиці зробити 100%, то в підсумку тематична частина буде прораховуватимуться браузером автоматично.
Я ж покажу як зафарбувати фон блоку контенту в білий колір не чіпаючи блок wrapper. Все дуже просто, створюємо ще один блок вкладений в блок wrapper, назвемо його, наприклад wrapper2. Зазначимо йому висоту 100% і білий фон. Що й потрібно було довести
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type = "text / css"> body, html {padding: 0; margin: 0; height: 100%;} body {background: #ddd; min-height: 100%; height: 100%; position: relative; } #Wrapper {width: 200px; margin: auto; height: 100%;} # wrapper2 {width: 200px; margin: auto; height: 100%; background: #fff;} #header {background: # CC3366; width: 100%; height: 50px;} #content {width: 100%; background: #fff; padding-bottom: 50px;} #footer {width: 200px; margin: -50px auto; background: # 000; color: #fff; height: 50px;} </ style> </ head> <body> <div id = "wrapper"> <div id = "wrapper2"> <div id = "header"> шапка </ div> <div id = " content "> основний текст сайту </ div> </ div> </ div> <div id =" footer "> підвал </ div> </ body> </ html> До нової зустрічі. На закуску як завжди соковите відео на тему екстрим-сплаву. Рафтинг на річці Замбезі, поріг з промовистою назвою - "унітаз диявола".