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

HTML разметка футера

Открываем наш HTML документ и перемещаемся в самый низ, то тега <footer>. В нем и будет располагаться весь контент футера.

Создаем 3 блока p. В первом будет указан E-Mail администрации. Во втором будет расположен номер телефона, а в третьем информация о копирайте.

Для каждого из них нужно задать селекторы, в нашем случае селекторы классов. Для номера и почты задаем класс <contacts>, а для копирайта — <copyright>.

После этого можно открывать CSS документ и записывать туда все необходимые стили.

Третий способ

Он хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет.

CSS-код:

Здесь мы эмулируем поведение таблицы, превратив блок .wrapper в таблицу, а блок .content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку .content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.

В результате footer прижат к низу.

Живой пример 3-го способа

Видео

Пятый способ (самый актуальный)

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

CSS-код:

Узнать про поддержку браузерами свойства flex можно здесь.

Живой пример 5-го способа

Теги

Adblock
detector