Как прижать футер к низу страницы — 2.

Мы хотим показать вам еще один способ решить проблему с подвалом сайта, но уже без использования  позиционирования.

Наверное, каждый разработчик сайтов сталкивался с этой проблемой в начале своей карьеры. Когда на странице мало контента, нижний блок – его часто называют подвал (или футер) отрывается от низа страницы и зависает где-нибудь посередине.

Выглядит некрасиво, особенно на экранах с большим разрешением.

Вспоминаем теорию.

Самым главным элементом, который выступает предком для всех остальных, всегда является <html>. Внутри него находится <body>, где размещается все содержимое веб-страницы, которое отображается в окне браузера.

Очень часто внутри  <body> помещают служебный контейнер <div> с идентификатором “wrapper”, который служит как бы оберткой для всех остальных элементов и выполняет много полезных функций: например, центрирует сайт посередине экрана, регулирует ширину, если сайт резиновый, в некоторых случаях именно в нем реализуется функция прокрутки и т.д.

Вы можете назвать его как угодно -  главное чтобы он был внутри элемента body, а все остальные элементы  были внутри него.

Внутри этого <div id=”wrapper”> разместим еще 2 блока. основной — назовем его “main” и подвал – “footer”.

Теперь вернемся к решению нашей проблемы.

1. Чтобы наш блок с контентом <wrapper>занимал всю область окна браузера, ему надо задать высоту 100%.

Высота элемента в процентах считается от высоты контейнера, в котором он находится, то есть от высоты родительского элемента. Во всех элементов (в том числе и <body> и <html>)  высота по умолчанию авто. Невозможно вычислить  высоту в процентах от элемента, у которого она авто. Поэтому, чтобы высота  100% заработала, надо установить всей цепочке контейнеров, начиная с <html>  высоту 100%.  <html> возьмет свои 100% от высоты области просмотра,  <body> от <html>, а <wrapper> от<body>.

2. Учтите, что к высоте добавятся отступы, которые по умолчанию есть у каждого браузера и появится прокрутка. Чтобы убрать прокрутку, надо обнулить margin и padding у html и  body.

3. Чтобы блок <footer> не растягивал страницу по высоте и не появилась все та же прокрутка, обязательно задать ему высоту (например 100 пикселей), а блоку <main> отрицательный margin-bottom на эту же высоту (у нас это -100px).

4. По логике, чтобы подвал был прижат, блоку <main> тоже надо задать высоту 100%. Да, это так, футер прижмется к низу, что и требовалось, и все будет отлично, пока не появится много контента. Произойдет переполнение, контент заползет на футер и даже опустится ниже

него. Футер опять подпрыгнет. Все это будет выглядеть ужасно. Примерно так:

Чтобы этого не случилось, блоку <main> надо задать min-height: 100%. Тогда футер уже точно будет прижат к низу при любой величине контента.

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

Чтобы исправить эту ситуацию, внутри <main> надо создать еще один блок-контейнер для всех внутренних <div id=”container”>, которому задать padding-bottom на  высоту футера.

Теперь наша разметка будет выглядеть так:

В блоке container будет находиться весь контент центральной части. Там же обычно находятся плавающие элементы — колонки. А плавающие элементы не учитывают чужие margin и padding и проваливаются, перекрывая нижние элементы и создавая те же проблемы, что были раньше: переполнение и подпрыгивание футера. Чтобы они не проваливались, блоку container задать overflow: hidden

Схема с прижатым к низу футером готова.

Навигация по записям

Как прижать футер к низу страницы — 2. 7 комментариев

    Алексей 10.02.2014 в 23:19

Видел множество сайтов, блогов, но такой проблемы не встречал. Спасибо автору за то, что раскрыл эту тему.

    Valentina Автор записи 10.02.2014 в 23:36

Статья предназначена для начинающих верстальщиков. Эти проблемы решаются на этапе верстки сайта, поэтому их очень редко можно увидеть в сети, где сайты уже сверстаны и готовы к работе.

Диана 11.02.2014 в 01:49

Интересно, а почему ж тогда у меня именно такая проблема? Только несчастный «футер» у меня находится не посередине, а, наоборот, в самом верху рядом с названием. На той платформе мне и то толком никто ничего не объяснил.

Миша ИП 24.02.2014 в 21:40

Диана, футер по определению не может быть и по середине и вверху! Футер — это «подвал». Наверху находится — header.

    Диана 26.02.2014 в 01:32

Это-то я понимаю, сейчас-то я дизайн сменила. Только было как-то странно видеть панель управления «подвалом» почему-то рядом с названием.

А как сделать футер красивым и объёмным, наполненным содержательной информацией, как у Деваки, например? С формой обратной связи, с наиболее значимыми публикациями, с подпиской и т.п. …

Источник: happyblogging.ru

Категория: Онлайн-шоппинг

Похожие статьи: