DIV верстка - Частина 4 - Як притиснути футер (footer, підвал) до низу екрану в нашому макеті сайту
- Які проблеми виникли з нашим макетом сайту
- Як притиснути футер до низу макета сайту
- Вставляємо розпірку і боремося з Internet Explorer
Які проблеми виникли з нашим макетом сайту
В цьому випадку може вийти так, що футер НЕ буде притиснутий до низу екрану, а розташовуватиметься мало не на його середині по висоті, що в більшості випадків буде виглядати негарно і не естетично.
Все ж, на мою думку, притиснути footer до самого низу макета сайту потрібно, і особливо це буде актуально в разі, коли висота сторінки вийти менше, ніж висота екрану користувача. Схематично це можна представити так:
Тобто правильна поведінка футера для випадку малої кількості інформації на сторінці і великого екрану користувача буде наступним:
Що б це реалізувати, потрібно здійснити ряд маніпуляцій з кодом нашого макета. Причому, зміни ми будемо вносити не тільки в файл стильового CSS оформлення Style.css, але і в Index.html, що містить Html код і формує Div блоки. Але про все по порядку.
Для прикладу ми будемо використовувати створений нами раніше трехколоночной макет сайту. При цьому Index.html буде виглядати так:
А в файлі Style.css були прописані такі CSS властивості:
Ну, а сам макет виглядав приблизно так:
Як бачите, футер НЕ притиснутий до низу і, отже, не задовольняє нашим вимогам (він розташовується завжди під самою нижньою колонкою), тому доведеться внести корективи в код. Все те ж саме можна буде зробити і для двоколонковому, і для гумового макета теж. Метод універсальний.
Як притиснути футер до низу макета сайту
Отже, нам потрібно змістити Div контейнер з футером до низу екрану. Для цього спочатку потрібно задати висоту всієї сторінки, рівну ста відсоткам (вона буде займати весь екран). Це потрібно буде для того, щоб потім змінити розмір основного блоку з макетом теж до 100%.
Весь вміст сторінки сайту поміщається в відкриває і закриває теги Body і тому нам потрібно в Style.css дописати для тега Body ще одне CSS властивість, що задає висоту дорівнює 100%:
На зовнішньому вигляді це ніяк поки не відіб'ється, але зате тепер основний блог можна буде розтягнутися на всю висоту екрану. Тобто це був своєрідний підготовчий етап.
Основні властивості CSS, при бажанні, ви можете подивитися в Уроки CSS. Тепер задамо для Div контейнера, в якому укладено весь наш макет, мінімальну висоту рівну 100%:
Властивість border: solid 3px black дозволяє задати для даного контейнера суцільну рамку (solid) товщиною в 3 пікселі чорного кольору. Це дозволить наочно побачити, що контейнер з макетом розтягнувся на всю висоту екрану навіть при малій кількості інформації на сторінці:
Тепер нам потрібно буде винести блок футера із загального контейнера і розмістити його нижче, відразу ж після спільного. Що це дасть? А то, що, нарешті, зволить опуститися вниз футер в макеті, а не буде як раніше притискатися до найдовшої його колонці. В цьому випадку Index.html прийме наступний вигляд:
Зверніть увагу, блок з футером тепер не знаходиться всередині загального контейнера (maket), а отже його ширина тепер уже не регулюється CSS властивостями, заданими для maket в файлі зі стильовим оформленням Style.css. Футер буде по ширині розтягуватися на весь екран, але все-таки він вже буде розташований в нижній частині екрана, відразу під основним блоком:
Але знову виникає проблема, бо для того, щоб побачити підвал, тепер доводиться прокручувати екран в браузері (бачите на наведеному малюнку смугу прокрутки).
Але для того, щоб задати негативний відступ від верху, потрібно знати цю саму висоту footer, а ми її поки що не знаємо.
Тому спочатку поставимо контейнеру містить підвал висоту, прописавши відповідне властивість в Style.css:
А потім задаємо для нього негативний відступ зверху на висоту рівну його висоті:
Це дозволить підвалу піднятися вгору рівно на свою власну висоту і тим самим вписується в екран браузера (тепер можна прибрати CSS властивість border: solid 3px black з правила для maket, щоб товщина рамки не заважала всьому нашому макету разом з футером поміститися в екрані по висоті) :
Як бачите, тепер смуга прокрутки в браузері не виникає і весь наш трехколоночной макет сайту на основі блокової верстки поміщається в одному екрані (у разі малої кількості інформації на сторінці) і має футер, розташований в самому низу. Що нам, власне, і було потрібно зробити.
Вставляємо розпірку і боремося з Internet Explorer
Але виникає проблема. яка проявиться лише тоді, коли інформації на сторінці макета побільшає і може вийти така ситуація:
Виходить, що може виникнути ситуація, коли інформація в одній з колонок макета наїде на футер, що буде виглядати не красиво. Відбувається це через горезвісний негативного відступу, який ми задали для нього і який допоміг підняти наш підвал з наїздом на основний контейнер макета.
Тобто виходить, що в нижній частині екрана розташовані два блоки, що перекривають один одного в області підвалу.
Рішення даної проблеми полягає в додаванні нового порожнього Div контейнера (так званої розпірки) в основний контейнер нашого макета (maket), в те місце, де раніше розташовувався блок з футером.
А в Style.css пропишемо для цього (ID властивість Height, що задає висоту цього контейнеру-розпірці рівну висоті підвалу:
В результаті футер буде притискатися знизу не до інформації, що міститься в основному контейнері (наприклад, текст в найвищій колонці), а на рівну підвалу по висоті область з контейнером-розпіркою, що не містить ніякої інформації.
Таким чином ми уникаємо наїздів і перекосів в нашому трехколоночной макеті. Все буде чітко і красиво (чинно і благородно):
Як я вже згадував вище, ширина футера тепер у нас повинна задаватися окремо, тому що цей контейнер тепер не входить до складу основного. Для цього потрібно додати в CSS файл додаткові властивості для Footer, що дозволяють поставити його ширину і вирівняти його посередині екрану по горизонталі.
Ширину має сенс задати рівній ширині всього макета за допомогою властивості Width, а вирівнювання по горизонталі можна здійснити таким же способом, як ми це зробили для всього макета на блокової верстці.
Таким чином, нам потрібно буде додати для ID Footer додаткові властивості:
За допомогою властивості width: 800px задається ширина рівна 800 пікселів, а за допомогою двох властивостей margin-left: auto і margin-right: auto задається настройка відступу зліва і праворуч від підвалу автоматично, в результаті чого ці відступи будуть рівними і наш герой вирівняється по середині:
Ну от, начебто більше вже нічого покращувати, але не тут-то було. Як завжди наш улюблений браузер Internet Explorer 6 чогось та не розуміє з використовуваних нами властивостей CSS. У цьому браузері (і, можливо, в якихось інших старих теж) не дивлячись на всі наші старання підвал не буде притиснутий до низу, а як і раніше буде прилипати до найвищої колонці макета сайту.
Все це відбувається через те, що (браузер Internet Explorer 6 не розуміє властивість min-height: 100%, яке ми використовували для завдання мінімальної висоти основного блоку, що дорівнює висоті екрану.
Тому для вирішення цієї проблеми нам доведеться застосувати так званий хак, що дозволяє пояснити (на пальцях) старим браузерам, що потрібно робити. Перед списком CSS властивостей для maket потрібно буде вставити наступну комбінацію:
Це правило буде застосовано тільки для браузера Internet Explorer 6, інші не будуть його враховувати і виконувати.
Отже, остаточний вигляд Style.css з притиснутим до низу екрану футером буде наступним:
Ну, а остаточний вигляд Index.html був приведений трохи вище. Все, на цьому серію статей, присвячену блокової верстці 2 і 3 стовпчики фіксованих і гумових макетів сайту, можна вважати завершеною.