<
  • Главная
Статьи

Як притиснути футер. Як розтягнути блок div.

  1. Притискаємо футер до низу сторінки.
  2. Як розтягнути блок div по висоті батьківського блоку

Добрий день, шановні відвідувачі мого блогу . Сьогодні поговоримо про двох поширених проблемах, з якими стикаються верстальники при верстці макетів сайтів. Однією з проблем є завдання притиснення футера до низу екрану. Суть завдання полягає в тому, щоб при різних дозволах монітора футер був притиснутий до низу вікна браузера в разі, коли середня (тематична) частина сайту містить невеликий обсяг контенту.

Другий актуальним завданням є необхідність розтягнути якийсь внутрішній блок на всю висоту контейнера body. Як правило, це потрібно для того, щоб фоновий цього блоку малюнок був на всю висоту сторінки від верху сторінку до футера.

Притискати, і розтягувати будемо засобами 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>

До нової зустрічі. На закуску як завжди соковите відео на тему екстрим-сплаву. Рафтинг на річці Замбезі, поріг з промовистою назвою - "унітаз диявола".



Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью