Как сделать красивый подвал в html

Обновлено: 10.05.2024

Как сделать подвал сайта статичным?

1. z-index не должен быть отрицательным - именно из-за этого ссылки не работают. В принципе, z-index для подвала вообще не нужен, но если делаешь, то только положительным.

2. Нужно не position: absolute, а position: fixed. Тогда подвал всегда будет прижиматься к низу экрана.

В общем, что-то вроде:

Если же ты хочешь, чтобы контент наползал на подвал, то вот такой вариант. Там главное - чтобы подвал в тексте стоял выше контента и чтобы у контента было position: relative. Никаких z-index'ов.

И, разумеется, у наползающего контента снизу должен быть margin, а не padding.

Подвал страницы

В подвале у нас располагается рисунок лежащего льва и контактная информация. Если проанализировать изображение, видно, что оно не однородное — трава слева, справа и по центру различается. Также она накладывается поверх линии (рис. 6.10).

Рис. 6.10. Трава отображается поверх границы

Ещё один момент, который следует учесть заранее — как отображать подвал при небольшом объёме контента. Возможен «висящий» подвал, внизу которого отображается фон веб-страницы (рис. 6.11а) или подвал, заполненный до нижнего края окна (рис. 6.11б).

а. Висящий подвал

б. Подвал прижат к краю

Рис. 6.11. Разновидности подвала

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

Способов добавления рисунка травы для подвала несколько, пойдём самым простым путём и сделаем его фоном. Изображение, чтобы оно корректно смотрелась на разных разрешениях, придётся задать достаточно большим, 2000 пикселов по ширине. Картинка ставится через свойство background и в параметрах её положение указывается по центру значением 50% 0 .

Код HTML будет простым.

Ширина этих слоёв явно не указана, поэтому она занимает всю доступную ширину, так что текст будет выравниваться по левому краю. Необходимо ограничить текст нашим макетом, для этого включим дополнительный слой copyright и для него укажем ширину и выравнивание по центру.

Здесь к ширине контента ( width ) добавляется значение padding слева и справа, что в итоге и даёт ширину нашего макета в 760px. Текст сдвигается вправо с помощью универсального свойства margin , добавляемого к селектору P . Код для создания подвала и текста:

Осталось только включить рисунок с лежащим львом и окончательно подкорректировать стили. Льва добавим в виде обычного изображения через тег <img> , а чтобы управлять его положением поместим рисунок в <div> с классом lion . Впрочем, этот класс можно также установить напрямую тегу <img> . Окончательный код нашего подвала представлен в примере 6.16.

Пример 6.16. Код подвала

Положение льва укажем с помощью позиционирования. Для этого родительскому элементу <footer> следует указать свойство position как relative , а элементу lion как absolute . В таком случае свойства left и top управляют координатами относительно родителя, т.е. <footer> . Однако здесь есть одна сложность, <footer> занимает всю ширину страницы, а льва надо установить относительно макета в 760px. Значение для left указать нельзя, потому что мы не знаем, чему в пикселах равно расстояние от левого края браузера до левого края макета. Воспользуемся следующим трюком: для left установим 50% , что выровняет край рисунка по центральной оси, и относительно этого положения будем сдвигать рисунок свойством margin-left с отрицательным (влево) или положительным (вправо) значением.

Значения margin-left и top подбираются опытным путём, чтобы добиться наилучшего результата.

Добавление рисунка вносит путаницу с фоновыми рисунками, и они начинают накладываться друг на друга, так что пора восстановить их исконное место. Для начала сдвинем рисунок с травой вниз на 53 пиксела. Это число получилось вычитанием из высоты рисунка льва (80px) высоты рисунка травы (27px). И подымем наш подвал целиком вверх на 77–80 пикселов. Во-первых, поднять надо, потому что из-за рисунка льва подвал опускается вниз, во-вторых, получим наложение подвала на границу макета, как показано на рис. 6.10.

К сожалению, все эти действия не имеют никакого смысла, потому что из-за эффекта схлопывающихся отступов положение элементов считается совсем иначе. Отменить этот эффект можно разными способами, к примеру, с помощью полей, границ, абсолютного позиционирования, но в конкретном случае они не подходят. Здесь поля и границы окажутся лишними. Так что вспомним ещё один метод и добавим свойство overflow со значением auto . Вообще-то это свойство при необходимости добавляет полосы прокрутки, если контент не помещается в заданные размеры. Но сейчас overflow нам нужно только для одного — отменить схлопывающиеся отступы.

Текст в подвале и зелёный фон также поднимается вверх, поэтому для слоя footer-bg надо установить отступ сверху на высоту рисунка льва.

Окончательно для контента основной части добавляем поле снизу равное высоте рисунка, чтобы текст не закрывался подвалом.

Стиль для подвала приведён в примере 6.17.

Пример 6.17. Стиль подвала

Осталось решить последний вопрос, делать подвал висящим или нет (см. рис. 6.11). Вся реализация, показанная выше, направлена на висящий подвал, изменить поведение можно всего-навсего перенеся background из footer-bg в BODY . Хотя это действие установит зелёный цвет фона для всей страницы целиком, заметно это будет только там, где видно пространство под подвалом. Для остальных разделов вроде шапки, основной части задан свой собственный цвет фона, поэтому включение фона для селектора BODY на них не повлияет.

Прижатый подвал, 5 способов

Смысл прижатого подвала заключается в том, что он «прилипает» к нижней части окна браузера. Но не всегда; если на странице достаточно содержимого, чтобы сдвинуть подвал вниз, то это будет сделано. Если содержимого на странице мало, тогда подвал прижмётся к нижней части окна браузера.

Способ 1. Отрицательный margin-bottom для обёртки

Мы используем элемент .wrapper , в который помещаем всё, за исключением подвала. Затем устанавливаем для обёртки отрицательный margin-bottom , равный высоте подвала (пример 1).

Пример 1. Использование отрицательного margin-bottom

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

Способ 2. Отрицательный margin-top у подвала

Данный метод не требует использования элемента .push , вместо этого нужно обернуть содержимое в дополнительный элемент, к которому следует применить соответствующий padding-bottom . Это делается, опять же, для того, чтобы избежать поднятия подвала над любым содержимым из-за отрицательного margin-top (пример 2).

Пример 2. Использование отрицательного margin-top

Оба метода требуют дополнительных ненужных элементов HTML.

Способ 3. Использование calc() для уменьшения высоты обёртки

Один из способов не включать лишние элементы — это отрегулировать высоту обёртки с помощью calc() (пример 3). Тогда никакого перекрытия не будет, просто два элемента складываются друг с другом на общую высоту 100%.

Пример 3. Использование calc()

Обратите внимание на 70px в calc() и фиксированную высоту подвала 50px. Можно предположить, что в содержимом у последнего элемента margin-bottom равен 20px. Именно это значение нужно сложить с высотой подвала, чтобы полученную сумму вычесть из высоты области просмотра. И да, мы используем единицы vh как небольшой трюк, чтобы не устанавливать 100% у body и обёртки.

Способ 4. Использование флексбоксов

Большая проблема у перечисленных трёх методов состоит в том, что они требуют подвала фиксированной высоты, а это довольно неприятно. Содержимое может измениться. Элементы гибкие. Фиксированная высота — опасная территория. Использование флексбоксов для прижимания подвала не только не потребует дополнительных элементов, но и позволяет установить подвал произвольной высоты (пример 4).

Пример 4. Использование flex

Вы можете даже добавить заголовок выше или ниже материала. Вот пара хитростей.

flex: 1 для дочернего элемента, который будет расти для заполнения пространства (содержимое в нашем случае).
или margin-top: auto , чтобы сдвинуть дочерний элемент от соседа (или другой margin , в зависимости от направления).

Помните, у нас есть полное руководство по флексбоксам.

Способ 5. Использование Grid

Разметка с помощью Grid более новая (и менее поддерживаемая), чем флексбоксы. У нас есть также по нему есть полное руководство. Вы также можете довольно легко использовать Grid для прижимания подвала (пример 5).

Что такое подвал сайта или Footer HTML?

И не прав тот, кто думает, что в подвал сайта заходит мало посетителей, в корне не прав!

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

Как правильно оформить подвал сайта?

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

Это первый подвал сайта:

Это второй подвал для сайта:

Это третий подвал для сайта:

Это четвертый подвал для сайта:

Это пятый подвал сайта:

Это шестой подвал сайта:

Ну, как Вам эти Footer HTML? Понравился хотя бы один из них? Я надеюсь, что да?!

Если они вам понравились, тогда я предлагаю скачать их совершенно бесплатно прямо сейчас и использовать в своих целях!

К стати о текстовом редакторе! Я например пользуюсь ,и вам советую, только Notepad++. Так как он самый удобный и безопасный!

Примеры футера сайта с помощью HTML + CSS

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

Почему так важен нижнее часть для сайта:

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

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

Нижний колонтитул сделан в Bootstrap от Digital Avinash

Установочный процесс:

<div >
<div >
<h5 >COMPANY NAME<span></span></h5>
<p>About the company, little discription will goes here.. </p>
</div>
</div>

<p><a href="mailto:info@domain.com" title="glorythemes">info@domain.com</a></p>
<ul >
<li ><a title="youtube" target="_blank" href="/"><img alt="youtube" width="30" height="30" src=""></a></li>
<li ><a href="/" target="_blank" title="Facebook"><img alt="Facebook" width="30" height="30" src=""></a></li>
<li ><a href="/" target="_blank" title="Twitter"><img alt="Twitter" width="30" height="30" src=""></a></li>
<li ><a title="instagram" target="_blank" href="/"><img alt="instagram" width="30" height="30" src=""></a></li>
</ul>
</div>
</div>

/* Footer Top */
.footer-top

/* Footer transparent */
footer.transparent .footer-top, footer.transparent .main-footer < background: transparent;>
footer.transparent .footer-copyright

/* Footer 4 */
.footer- .logo

.typo-light h1,
.typo-light h2,
.typo-light h3,
.typo-light h4,
.typo-light h5,
.typo-light h6,
.typo-light p,
.typo-light div,
.typo-light span,
.typo-light small

Этот нижний колонтитул является идеальным примером нижнего колонтитула. С левой стороны есть место для информации о компании. Там вы можете отобразить название компании и описание вашей компании. В разделе «Быстрые ссылки» вы можете отображать ссылки на важные страницы.

Пользовательский интерфейс нижнего колонтитула

.footer-bs .footer-ns h4 <
font-size: 11px;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom:10px;
>
.footer-bs .footer-ns p

Это замечательный нижний колонтитул, разработанный песней, пользователем CodePen. Полезная информация и ссылки были представлены в разных колонках. Первый столбец содержит логотип компании и описание компании. Затем некоторая информация об авторских правах была предоставлена ??в первом столбце.

Функциональный футер для сайта

footer .three-column <
overflow: hidden;
>

footer .three-column li <
width: 33.3333%;

padding: 5px 0;
>

footer .socila-list <
overflow: hidden;
margin: 20px 0 10px;
>

footer .socila-list li <

margin-right: 3px;
opacity: 0.7;
overflow: hidden;
border-radius: 50%;
transition: all 0.3s ease-in-out;
>

footer .socila-list li:hover <
opacity: 1;
>

Здесь три подзаголовка, под которыми есть полезная информация и важные ссылки. Первый подзаголовок содержит необходимые ссылки, такие как ссылки на домашнюю страницу, страницу «О программе», страницу «Услуги» и другое.

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

Верстка подвала сайта HTML+CSS.

Актуальность HTML верстки очень высока. На всех фриланс-биржах всегда висит по 10-20 заказов на срочную верстку, также HTML+CSS+JS позволяют клепать пусть плохие, но приложения под Android и WinPhone. Да и любой компании нужен работающий сайт, а не только красивые дизайны. Что такое обычный проект для верстальщика? Это 5-10 страниц в psd/pdf (InDesign/illustrator), которые нужно очень качественно сверстать за 2-3 дня со всеми правками и спонтанными идеями клиента.

Давайте сверстаем подвал для сайта и поймем, удастся ли получить удовольствие и деньги от процесса верстки своих же макетов.

Самое важное — заранее продумать структуру сайта, расставить div’ы в необходимой последовательности и с правильной вложенностью. Если вы верстаете страницу сразу, без дизайна (например, клепаете 5-10 лэндингов за рабочий день), то лучше набросать структуру хотя бы на листочке, иначе вы будете переверстывать страницы сайта по несколько раз.
Итак, начинаем верстать. Создаем пустой html документ со следующей шапкой.

И верстаем. Элементы бывают блочные (структурное форматирование), текстовые (строчные). Под элементом подразумевается конструкция вида <p>Заголовок</p>. Сделать из блочного элемента строчный можно с помощью display: inline. Строчные элементы используются для оформления текста. Блочный элемент это прямоугольник с контентом. К блочным относятся контейнеры<div>,<h1>,</h1> и др. Один блочный внутрь другого можно вложить, и это помогает реализовать большинство работ концептуальных дизайнера. Не надо вкладывать блочный элемент в строчный, это не соответствует стандартам. Ещё есть контейнер , который служит для определения строчных элементов документа, он поможет применить отдельный css к отдельной буковке.

Думаю, что наиболее важно рассмотреть display. Display это свойство, которое определяет, как элемент будет показан на странице. Самые распространенные и надежные значения это block, inline, list-item и none. Block делает элемент блочным, inline делает элемент строчным, inline-block делает элемент внутри блочным, но при этом он обтекается другими элементами страницы подобно строчному, list-item делает элемент блочным и добавляет маркеры списка, none прячет элемент (а hidden со свойством visibility позволит элемент скрыть, но оставить место пустым).

Вооружившись этим знанием, накидываем вложенность div’ов и общую структуру, не забывая все грамотно оформлять отступами. Ах да, и никаких таблиц, только блоки. В этом и заключена основная суть HTML-верстки: правильная расстановка divов и грамотное их оформление через классы CSS. Конечно, верстальщик должен прикрутить js скрипты. Но эта работа выходит за рамки данного урока, да и бОльшая часть скриптов требует всего-то прописать класс. Пишем примерно такой HTML код

Набросав структуру, можно вставить картинки и текст, и любой другой контент. Смотрим в самых популярных браузерах на получившееся безобразие. Пока что клиенту рано показывать наш результат работы, даже по требованию результат, иначе придётся оправдываться за качество работы. И начинаем писать классы CSS.

CSS 3 позволяет очень изящно и дёшево сделать страницу красивой и соответствующей дизайну. Плавные смены оттенков текста, сложные градиенты, отступы от краев, тени/свечение, отрицательные значения, прозрачность и многое другое позволяет сделать огромное количество распространенных элементов дизайна с помощью кода. Пара важных моментов. Firefox плохо отрабатывает transparent, используйте rgba. IE8 прекрасно отрабатывает transparent, но не знает что такое rgba.

Важно сразу усвоить принцип использования позиционирования: абсолютное используется для наложения одного элемента на другой (картинка в галерее, стрелки для листания контента и т.п.) и для декоративных элементов. Относительное используется редко, помогает внедрить абсолютный элемент в другой элемент (принцип ребенок/родитель) с привязкой координат.
Float: блочные элементы обычно начинаются с новой строки, и хорошим способом изменить тип обтекания является float. Например, выровняет картинку по левому краю, и текст будет её обтекать. Также элементы встанут в один ряд с переносом строки.

И несколько маленьких советов: лучше использовать P, чем BR. Лучше использовать text-transform:uppercase/lowercase, чем писать капсом. Не используйте inline styling, лучше сделайте все через один style.css. Используйте normalize.css. Элементы, которые встречаются в документы только один раз внутри документа, делайте через идентификаторы, в противном случае используйте классы. Вот CSS код:

В итоге мы получаем фиксированную верстку, которая не разъезжается и смотрится симпатично. Конечно, демонстрация некоторых возможностей CSS не прошла бесследно. Такое количество эффектов не годится для высоконагруженных сервисов, но для большинства задач пойдёт.

Адаптивный футер страницы на HTML + CSS

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

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

Так выглядит при установочном процессе:

Где все было проверено, чтоб корректно смотрелось, как на большом обзоре, так и на малом экране, что сжимание все складывается в одну вертикальную колонку.

На страницах в head или низ сайта

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

То все это делается просто, ведь каждый элемент выставлен под своим стилем, где не будет так сложно поменять, и что-то добавить от себя. Но и сам оттенок цвета, он идет на 2 ракурса, это общий и самый низ, где изначально поставил переломный цвет, что визуально смотрится совершенно по другому, как изначально был представлен в более светлой гамме.

Прибитый к низу футер своими руками

Начнём с теории

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

Посмотрим на строение страниц нашего подопытного. Для этого проще всего раскрыть окно Firebug или подобное окно («Инструменты разработчика» (Ctrl-F12)) в Chrome.

Перейдём к рабочему примеру

Поскольку мы не можем быть сильнее самого последнего верстальщика сайта, «влепившего» футер внутрь содержания, отложим идею правильного размещения футера на свой будущий сайт (который, стало быть, будет «круче» Хабра!), а Хабр препарируем джаваскриптом (юзерскриптом) до правильного состояния. (Сразу скажем, виноват не верстальщик, не стрелочник, а вид сайта, конечно, определяет стратегическое решение руководства проекта.) Так мы не достигнем идеала, потому что в первую секунду-две в процессе загрузки страница будет с неправильной вёрсткой. Но для нас важен концепт и возможность превзойти по качеству самый популярный сайт ~~мира~~ айтишников.

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

Расставили блоки по местам — теперь осталось приписать элементам нужные свойства. Высоту футера придётся задавать точно, просто потому что мы её уже знаем к моменту действия юзерскрипта (конец загрузки страницы). Из-за точки срабатывания юзерскрипта, как уже говорилось выше, прыжок отображения футера на странице неизбежен. Можно пытаться делать «хорошее лицо», но при «плохой игре»? Зачем? «Плохая игра» сайта позволяет сделать без сверхусилий концепт, которого будет достаточно для оценки качества и не понадобится при «правильной игре» на своём проекте.

Здесь позволили себе применить самописную функцию h.apnd_el, делающую примерно то же, что и в jQuery —

И далее — ещё одна типичная функция внедрения правил CSS — h.addRules. Здесь без неё не обойтись, потому что нужно объявить правило с "!important" — как раз из-за особенностей приоритетов стилей из юзерскрипта.

С этими кусочками кода мы сможем увидеть в юзерскрипте прибитый футер (после прыжка его вниз) и полностью осознать, как надо строить вёрстку страниц. Использовать прыгающий дизайн повседневно — неприятно, поэтому рекомендуется его сделать исключительно для демонстрации и тестирования. В юзерскрипте HabrAjax я установил аналогичный скрипт, закрыв его настройкой «underFooter» (установить «галочку» в списке настроек перед «прибитый к низу футер»), начиная с версии 0.883_2012-09-12.

Затрагивает ли прибитый футер необходимость обновления стилей ZenComment, если они установлены? Да, затрагивает. Из-за сложной цепочки приоритетов стилей, в которых стили, вставляемые юзерскриптом, имеют низший приоритет, пришлось немного подкорректировать юзерстили для возможности работы с прибитым футером. Если вы не обновите юзерстили (до 2.66_2012-09-12 +) — футер будет работать неточно.

Блок rotated_post (три популярных поста из прошлого) логичнее смотрится при футере, поэтому в реальном скрипте он тоже перенесён в футер.

Второй пункт (из списка недостатков вёрстки) — рассуждения чисто для Хабра (к юзерскрипту не относятся и частично повторяют прежние).

У страниц имеется проблема, мешающая сделать прибитый футер на чистом CSS — неопределённая высота футера, зависящая от размеров шрифта по умолчанию в браузере. Для реализации футера на CSS требуется подобрать относительные высоты шрифтов, но и они могут не сработать, если на компьютере пользователя не будет предусмотренных шрифтов. Поэтому решение должно включать джаваскрипт, который может подгонять переходами (transitions) приблизительное положение футера до точного. Или, посмотрев на приемлемость сделанного решения на юзерскрипте на разных платформах, сделать вычисляемую установку прибитого футера — первые наблюдения показывают, что решение практично.

Вывод: полноценно оформить раскладку на Хабре можно, но для этого нужен верстальщик, чётко понимающий поведение раскладки, располагающий блоки в правильном порядке. (Сейчас футер и верхний баннер стоят «не там» и не так, чтобы просто стилями получить прибитый футер.) Можно обойтись без JS, если задать высоту футера в относительных единицах, взяв некоторый запас места на неопределённость шрифта.

Реализация

Если включить HabrAjax 0.883+, то увидим работу «прибитого футера». Он адаптируется по высоте с помощью скриптов. Он позволяет оценить, насколько лучше выглядят страницы с прибитым футером по сравнению с обычными. Юзерстили ZenComment совместимы со скриптами, но для правильной работы прибитого футера с ними нужно установить версию ZenComment 2.66_2012-09-12 +.

Факты о поведении реализации

Шаманство с футером, стилями и скриптами — это шаманство (лишь подкрепляемое теорией). В разных браузерах немного разное поведение, но кое-где — неожиданное. Без юзерскриптов и переставления блоков результаты будут другие. Вот что дали эксперименты с реализацией на юзерскрипте.

1) Firefox — неожиданное отсутствие прыжков футера. Странно, что их нет — отрисовка происходит после размещения футера внизу.

2) Chrome — он удивил «блуждающим скроллом» — к странице с периодом раз в секунду добавляются пустые пространства внизу — что-то неправильное происходит с расчётом высот. Лечится прописыванием html,body в юзерстили, но без гарантий, что всегда будет работать. Надёжнее — проверять, не превышает ли документ окно по высоте, и если не превышает, то двигать футер, иначе — ничего. С прыганием — всё в порядке, оно есть.

3) Опера — без прыжков (v. 12.02) при первой загрузке страницы, но поспешная перезагрузка может показать прыжок футера. В остальном ведёт не менее корректно, чем Fx.

Что же, придётся специально приучить Хром вести себя правильно (скриптом) и в таком виде выкатить версию на обозрение. Поэтому участок в юзерскрипте немного сложнее, чем приведённый в статье.

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

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

Для каких страниц это полезно?

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

Будет ли поддержка?

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

Далее, посмотрим на «стрелочки» вместо квадратиков для оценивания комментариев. Они появились в юзерсилях almalexa («Prettifier») года 3 назад и переняты в ZenComment года 2 назад. Месяца 2-3 назад они появились на сайте. Начинает вериться в то, что через некоторое время стрелки разнесут на некоторое расстояние, как это сделано в ZenComment (одна стрелка слева от числа, вторая справа), чтобы меньше промахиваться.

Поэтому, возможно, и «прибитый футер» на Хабре — это не такая фантастика, какой могла показаться года 3 назад.

Другие возможности в скрипте HabrAjax, появившиеся за последние 3 месяца (отключаемы в настройках):
* авторост полей ввода (в Опере может тормозить на больших текстах);
* дни недели при датах, кроме «сегодня» и «вчера»;
* события в Ленте, сворачиваемые до 1 строки и 2 символов;
* сокращение слов «хабр*» до "χ·" и "χα";
* подсказки дат по номерам статей — сообщается, какого месяца и года статья до её загрузки, по номеру в URL;
* свёрнуты «Похожие посты» до 2 слов. Скриншот всплывающих «похожих постов» (показывает 12 ссылок, а не 4).

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

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

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

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также: