Как сделать динамический footer

Как правильно прижать плавающий футер к низу страницы

Это кошмар какой-то! Почему подвал вашего сайта опять « всплывает » и сдвигает дизайн? Неужели нельзя нормально прижать футер к низу страницы чем-нибудь? Контентом или кирпичами хотя-бы! Кирпич в монитор не пролазит?

Понятно, тогда сидите и ничего не делайте, пока не прочитаете нашу статью до конца.

Делаем правильный футер для своего сайта

Многие владельцы сайтов встречаются с этой проблемой, когда footer страницы просто всплывает « кверху ». И тогда непонятно, что делать. Чаще всего таким недостатком грешат дизайны сайтов, сверстанные на скорую руку, самостоятельно ( кружок «очумелые ручки» ) или начинающими веб-мастерами.

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

Для устранения этого « дефекта » сверстанного шаблона не обязательно тратиться на услуги веб-мастера. Чаще всего футер сайта можно поставить на место самостоятельно. Рассмотрим все возможные варианты устранения подобной проблемы:

Первый способ

Первый способ « привязать » подвал « к дну » страницы построен на основе CSS . Для начала приведем код примера, а затем более подробно рассмотрим его реализацию:

Для того чтобы приклеить подвал к низу страницы тег мы вынесли за пределы контейнера ( слоя wrapper ). Растягиваем всю страницу и содержимое « тела » до границ экрана. Для этого в коде CSS мы задали высоту тегов и в 100%:

Минимальную высоту слоя-контейнера устанавливаем тоже в 100%. Для случая, если ширина контента будет больше, чем высота контейнера, задаем свойству значение auto . Благодаря этому wrapper будет автоматически подстраиваться под ширину размещенного на странице контента:

Строчка кода « height: 100% » предназначена для старых версий IE , которые не воспринимают свойство min-height .

Чтобы в дизайне страницы отделить место под подвал, мы устанавливаем отступ для тега в 100 пикселей:

На данном этапе мы получили веб-страницу шириной во весь экран и дополнительно 100 пикселей, которые « нейтрализуются » отрицательным значением отступа для футера ( margin: -100px ) при установленном для него относительном позиционировании ( position: relative ). Таким образом, с помощью отрицательного значения отступа мы « сдвигаем » подвал в область контейнера, для которого установлена высота в 100%.

В данном примере разметка веб-документа задана с помощью сравнительно новых тегов HTML 5 , которые могут быть неправильно интерпретированы устаревшими версиями браузеров. Из-за этого весь дизайн страницы может быть отображен некорректно. Чтобы избежать этого, нужно новые теги из арсенала 5 версии языка гипертекста заменить на обычные

Усовершенствованный вариант

Рассмотренный выше способ того, как сделать футер внизу страницы « незыблемым » не всем подходит. Если в будущем вы собираетесь модифицировать и совершенствовать дизайн своего сайта с помощью всплывающих окон, тогда лучше отказаться от использования предыдущей реализации.

Читайте также:  Как сделать магнитолу sony

Чаще всего в реализации pop-up окон используется свойство CSS z-index . С помощью его значений задается порядок наложения слоев друг на друга.

Чем больше значение z-index элемента, тем выше он будет находиться в общем стеке « наслоения ».

Но из-за того, что в предыдущем примере мы использовали отрицательное значение отступа для футера, нижняя часть всплывающего окна будет перекрываться верхней областью подвала. Даже несмотря на то, что оно будет иметь большее значение z-index . Потому что у родителя всплывающего окна ( wrapper ) значение этого свойства все равно меньше.

Вот более совершенный вариант:

CSS — код примера:

Как видно из кода, подвал мы поместили в состав основного элемента. Контейнеру мы задали относительное позиционирование, а для футера – абсолютное. Подвал мы закрепили в самом низу контейнера, установив его положение слева и сверху в 0.

Вариант для подвала с нефиксированной высотой

Предыдущие способы реализации могут гарантировать, что футер будет всегда внизу страницы. Но только если подвал фиксированной ширины. А что делать, если количество размещаемого в нем контента нельзя спрогнозировать?

Для этого потребуется более совершенный вариант для нефиксированного подвала. В нем футеру задается значение table-row для свойства display . Благодаря этому он будет отображаться как строка таблицы:

Это абзац, расположенный в подвале сайта. Футер нефиксированный, поэтому его размер может подстраиваться под размер содержимого:

Футер сайта надежно прижат к низу страницу. Теперь он уж точно не всплывет, и « не поломает » весь дизайн ресурса. И все потому, что для фиксации подвала мы использовали не кирпичи, а возможности HTML и CSS .

Источник

Введение

В Гугле можно найти много реализаций прилипающего футера. Я перепробовал большинство из них, и обычно где-нибудь они да подводили. В основном из-за того, что предложенные методы были слишком старыми, и не срабатывали в новых браузерах. Но, поскольку страницы, предлагающие решения, довольно старые, на них давно ссылается много других сайтов, из-за чего они до сих пор находятся довольно высоко в поисковой выдаче Гугла. Вебмастеры находят их самыми первыми в своих поисках, и потом долго чешут репу, не видя ничего нового.

Решения Райана Фэйта хорошо известно и работает, но требует лишний пустой

нет.

Прилипающий футер, представленный здесь, основан на информации, полученной из статьи Изучаем футеры на List Apart, а так же дополненной материалом Кэмерона Адамса и вот этим кусочком с lwis.net. Он использует clearfix-хак, чтобы держать футер на своем месте в Google Chrome и других браузерах, где он может «всплыть» наверх при изменение размеров окна. Так же этот хак позволяет избежать проблем, если вы используете float для создании двух- или трехколоночных макетов. Мы протестировали его более чем в 50 браузерах, и работает он отлично.

HTML-код

div id =»main» class =»clearfix» >

Содержимое вашей страницы можно расположить внутри

‘а main. Например, для двухколоночного макета код будет таким:

div id =»main» class =»clearfix» >

Шапку можно расположить внутри wrap, но снаружи main

div id =»main» class =»clearfix» >

Если вам захочется поместить какие-нибудь элементы вне этих блоков, то придется заморачиваться с абсолютным позиционированием и вычислением 100%-ной высоты.

CSS-код

Ниже — CSS-код, прижимающий футер к низу:

Значение высоты футера использовано здесь трижды. Важно, чтобы везде оно было одинаковым. Свойства height растягивают оберточный

Clearfix-хак спешит на помощь

Много CSS-дизайнеров уже знакомы с Clearfix-хаком. Он решает довольно много проблем с плавающими элементами. Здесь мы используем его, чтобы прибить футер в Google Chrome. Так же он избавит нас от проблем с «всплытием» футера в ситауции, например, когда в макете из двух колонок контент флоатится в одну сторону, а сайдбар в другую.
Поэтому добавляем в стили это:

Читайте также:  Лебедь как сделать звезду

Даже если вы используете метод Райана Фэйта с лишним

‘ом, придется применять этот хак для многоколоночных макетов.

Известные проблемы

Высота и поля

‘а в разных местах. Если хочется добавить что-то вроде padding:0 10px 0 10px;, будьте осторожны — это может переопределить отступы внизу, которые должны быть строго определенной величины, контент может пойти поверх футера на длинных страницах (в Google Chrome).

Размеры шрифтов

Устанавливая размер шрифтов в относительных величинах, помните, что пользователи могут увеличивать их. В некоторых элементах, хотя бы даже в футере, это может испортить настройки высоты и получится разрыв, если тексту не хватает места. Используйте абсолютные величины (pt или px), или просто сделайте футер побольше.

Платформа .NET

При разработке сайтов на ASP.net, где каждая страница находится внутри , не забудьте добавить height:100% для form, например так:

UPD от переводчика. Считаю нужным прояснить для вас, господа, несколько моментов:
1. Это топик-перевод. Все вопросы и возмущения по поводу методов можете направить автору, его зовут Стив Хэтчер, ссылка прилагалась с самого начала
2. По-поводу IE-Mac, неработы в Хроме и прочего: ребята, неизвестно когда писался этот метод, но он обновлялся и пересматривался, а кроме этого он работает в подавляющем большинстве браузеров. «Не работает в Хроме» может значить, что футер уплывал куда-то в ранних билдах этого браузера. Ну и что, что у вас стоит последний апдейт? Есть люди, которые браузер не обновляют просто потому, что не знают о такой возможности, или просто не видят необходимости в этом. Вам хуже станет от того, что этот способ работает везде? Ну правда?
3. pt vs. em vs. px vs. %. Используйте у себя на сайте что хотите. Автор предложил ДВА метода решения проблемы с разъезжающимися пропорциями, вам никто не запрещает и не навязывает использовать любой из них. Мы все здесь не маленькие и знаем, что такое хорошо, а что такое плохо.

Источник

5 способов создать прилипающий футер

Дата публикации: 2016-06-20

От автора: главная задача прилипающего футера «прилипать» к нижней части окна браузера. Если на странице много контента, то футер должен прилипать строго к нижней границе экрана. Если же контента слишком мало, чтобы пододвинуть футер вниз, опять же требуется его туда опустить.

Отрицательный нижний margin у блока-обертки

Есть блок-обертка, в котором находятся все блоки кроме футера. Данному блоку назначен отрицательный нижний margin, равный высоте футера.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

В данном методе требуется дополнительный элемент в контенте (с классом .push), чтобы отрицательный margin не притянул футер и не перекрыл область текста. Добавить блок push было довольно умным решением, так как у него нет никаких нижних отступов. Если бы и у этого блока был бы свой отступ, его бы пришлось учесть в отрицательном margin’е.

Отрицательный верхний margin на футере

В этой технике не нужен блок push, но тут требуется добавить дополнительный блок-обертку вокруг контента, у которого задан нижний padding. Это сделано для того, чтобы из-за отрицательного margin’а футер не поднимался вверх.

Читайте также:  Как сделать балык экмек

Обе техники похожи, так как в них требуется добавить дополнительный HTML элемент.

Функция calc() уменьшающая высоту обертки

Один из способов отказаться от дополнительной разметки это настроить высоту блока-обертки с помощью функции calc(). В таком случае не будет перекрытия, два элемента стыкуются и образуют высоту в 100%.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Обратите внимание на 70px в функции calc() и 50px фиксированной высоты футера. Тут мы учитываем, что у футера есть нижний margin в 20px. Из общей высоты необходимо вычесть высоту футера и его нижний внешний отступ. Также мы используем единицы измерения vw, чтобы не задавать 100% высоты body, пока не задано 100% высоты блока обертки.

Flexbox

Основная проблема со всеми описанными выше методами в том, что там нужна фиксированная высота футера. В веб-дизайне фиксированная высота считается признаком плохого тона, контент ведь может меняться. Все должно быть гибким. Фиксированная высота это плохой звоночек. Flexbox позволяет не только не добавлять лишнюю разметку для создания прилипающего футера, но и использовать переменные в значении высоты.

Источник

На прошлом уроке мы создали футер, украшенный волной, в его верхней части. Согласитесь, что неплохо было бы оживить нашу волну — сделать анимацию.

HTML разметка

Добавим в HTML-код четыре волны с разными идентификаторами.

CSS стили

На данный момент все волны имеют одну и ту же позицию. Наша задача с помощью CSS-стилей раскидать все волны по разным слоям с разной прозрачностью и небольшим сдвигом. Волна #wave1 окажется на самом верхнем слое. А каждому слою задать бесконечную анимацию с разной длительностью цикла.

footer .wave#wave1 <
z-index: 1000;/*на верхнем слое*/
opacity: 1;/*полная непрозрачность*/
bottom: 0;/*позиция снизу*/
animation: animate 4s linear infinite;/*свойства анимации*/
>
footer .wave#wave2 <
z-index: 999;
opacity: 0.5;/*прозрачность 50%*/
bottom: 10px;
animation: animate2 4s linear infinite;
>
footer .wave#wave3 <
z-index: 998;
opacity: 0.2;
bottom: 15px;
animation: animate 3s linear infinite;
>
footer .wave#wave4 <
z-index: 999;
opacity: 0.7;
bottom: 20px;
animation: animate2 3s linear infinite;
>

Создание анимации

Создадим две анимации (animate, animate2) с двумя кадрами, где будет происходить смена позиции фона по координате X. Амплитуда движения волны составляет от 0 до 1000 пикселей.

@keyframes animate <
0%,100%
<
background-position-x: 1000px;
>
100%
<
background-position-x: 0px;
>
>
@keyframes animate2
<
0%,100%
<
background-position-x: 0px;
>
100%
<
background-position-x: 1000px;
>
>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2022 Русаков Михаил Юрьевич. Все права защищены.

    Источник

    Поделиться с друзьями
    Ответ и точка