Приклади html і css - притиснути футер до низу сторінки

У кожному з прикладів будемо відштовхуватися від того, що макет сайту має таку звичайну структуру (ваш макет може відрізнятися, але способи універсальні):

Притиснути футер до низу за допомогою позиціонування

опис прикладу

  1. Всі блоки макета були укладені в додатковий блок-обгортку id = "wrapper". якому поставили мінімальну висоту (властивість CSS min-height) рівну 100%, щоб він розтягнувся на всю висоту вікна браузера, але якщо буде потрібно, то міг тягнутися і далі. Однак так як процентні значення вважаються відносно предка, то щоб все спрацювало, довелося явно вказати висоту (CSS height) для тегів і .
  2. Наступним кроком стало абсолютне позиціонування (CSS position) футера щодо обгорткового блоку до його нижньому боці (CSS bottom). Таким чином, футер у нас виявився притиснутий до нижньої частини сторінки.
  3. Так як абсолютне позиціонування вириває елемент з потоку, то при додаванні інформації в блоки з контентом і меню, частина її буде йти під притиснутий футер. Щоб цього не сталося, елементам id = "content" і id = "menu" були встановлені нижні внутрішні відступи (CSS padding) рівні висоті футера. Тепер саме вони будуть йти під футер і штовхати його вниз.
  4. Так як у нас в макеті блок з меню є плаваючим (CSS float), то футер все одно її буде помічати, а, відповідно, меню не буде штовхати його вниз. Для виправлення цього був створений ще один блок (class = "clear"), який перериває обтікання (властивість CSS clear). До речі, якщо ви не плануєте здійснювати підтримку IE6 та IE7, то можете замість цього блоку застосувати до останнього блоку перед футером (тут це "content") псевдоелемент: after і просто у нього зробити переривання обтікання.

У першому пункті було застосовано властивість CSS для вказівки мінімальної висоти, яка не розуміє Internet Explorer 6. Зате він розуміє властивість height якраз як мінімальну висоту. Також цей браузер в певних випадках ігнорує правило! Important. Ці його дві особливості і були використані в даному прикладі для створення хака. щоб змусити його робити те, що треба, не зачіпаючи інші браузери.

Притиснути футер до низу за допомогою додаткових блоків

опис прикладу

  1. Всі блоки макета крім футера були обгорнуті в додатковий блок id = "wrapper". якому була задана мінімальна висота (CSS min-height) в 100%. Це було зроблено для того, щоб блок-обгортка як мінімум витягнувся на всю висоту вікна браузера, але при необхідності (якщо вмісту буде багато) міг тягнутися і далі. Тепер висота нашої обгортки стала дорівнює висоті вікна браузера, а висота всієї HTML-сторінки = висота обгортки + висота футера.
  2. В результаті дій першого пункту наш футер хоч і притулився до низу сторінки, але пішов за нижню межу вікна браузера, що не хорошо. Щоб підняти його в зону видимості, для нього було задано верхнє негативне поле (CSS margin-top) розмір якого дорівнює висоті самого футера. Все, футер притиснутий і знаходиться внизу сторінки.
  3. Так як в попередньому пункті у притиснутого футера ми вказали верхнє негативне поле, то при додаванні інформації в блоки з контентом або меню, частина її буде йти під цей футер. Щоб цього уникнути був створений ще один блок з id = "footer_correct". висота якого дорівнює (можна зробити навіть трохи більше) висоті футера. Таким чином, саме цей коригувальний блок буде йти під притиснутий футер і штовхати його вниз, запобігаючи приховування інформації.
  4. Коригуючого блоку було додано переривання обтікання (CSS clear), щоб він не огинаючи меню, якщо воно буде перевищувати висоту контенту. Відповідно у самого футера це переривання обтікання було прибрано за непотрібністю.

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

  • Як зробити сайт
    Самому безкоштовно
  • Підручник HTML
    Для початківців
  • Підручник CSS
    Для новаків
  • Довідники
    За HTML і CSS
  • приклади
    HTML і CSS
  • посилання
    Корисні сайти для веб-майстрів
  • інструментарій
    Програми для створення сайтів