Як притиснути футер

головна Вебразработчик Основи CSS

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

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

Притискати, і розтягувати будемо засобами CSS. можна сюди залучити java script, але навіщо, якщо це можна зробити простіше і елегантніше. Рішення подібних проблем за рахунок ява коду має один очевидний недолік, ява скрипт можна відключити в браузері і верстка попливе.

Подібні завдання я вже вирішував раніше, але кожен раз доводилося за новою шукати інформацію як притиснути футер і розтягнути блок div, тому, що не розумів суті.

Притискаємо футер до низу сторінки.

Початково маємо якусь 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 по ідеї повинно працювати.

Як розтягнути блок div по висоті батьківського блоку

Власне ми вже це зробили, блок #wrapper розтягнутий по висоті на 100% контейнера body. Проблема полягає трохи в іншому, на малюнку нижче видно, що білий фон контенту не дотягується до футера, а між контентом і футером з'явився сірий фон. Щоб цього уникнути можна задати для обгортки такий же колір як і для блоку контенту (#wrapper).

Я ж покажу як зафарбувати фон блоку контенту в білий колір не чіпаючи блок wrapper. Все дуже просто, створюємо ще один блок вкладений в блок wrapper, назвемо його, наприклад wrapper2. Зазначимо йому висоту 100% і білий фон. Що й потрібно було довести

@ Олексій, # 16:
В лоб цю задачу не вирішити. Оскільки висота шапки фіксована, висоту контенту потрібно ставити не в%, а в абсолютних значеннях, а це значить, що тягнуться блок контенту не буде. Можна яваскрипт прораховувати висоту контенту при різних висотах вікна браузера, але це дуже коряве рішення не рекомендую. Все дуже сильно залежить від конкретного завдання. Який фон? які кути скруглять? що має просвічувати? Але так як ви вирішуєте задачу - вона не розв'язна, не можна за допомогою CSS розтягнути блок на висоту 100% - (висота шапки), можна на 100%, на 75%, на 100px і тільки так.
Таблиці повинні допомогти.

у тега осередку td в CSS можна задати обрізка кутів і тінь?

Можна в я Чейкен вставити блок і вже у блоку скруглять кути.