Как опустить footer в самый низ css

Как опустить footer в самый низ css

Как с помощью CSS прижать footer к низу окна браузера

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

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

В процессе практики я выделил для себя 5 способов прижимания футера к низу окна браузера с помощью CSS.

HTML-код всех представленных способов имеет следующую структуру (отличие лишь в CSS-коде):

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

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

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

Второй способ

Footer прижимается вниз за счет вытягивания блока контента и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ ( margin-top ) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа.

Благодаря свойству box-sizing: border-box , мы не позволяем блоку с классом .content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.

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

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

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

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

Четвертый способ

Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh , которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала.

100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.

Узнать, какие браузеры поддерживают calc() и vh , вы можете на сайте caniuse.com по следующим ссылкам: поддержка функции calc() , поддержка единицы измерения vh .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Современные решения старых CSS-задач (1 часть): Удержание футера внизу страницы

Это первая статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.

В течение многих лет я регулярно возвращалась к этой статье Matthew James Taylor за способом удержания футера страницы в нижней её части, даже если высота основного содержимого меньше высоты окна. Данный метод основывался на явном задании высоты футера, что являлось не масштабируемым, но очень хорошим решением (до появления Flexbox).

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

• страницах авторизации
• статьях блогов или новостей
• страницах списка товаров
• подробностях событий календаря

Существует два способа решить эту проблему с помощью современного CSS: Flexbox и Grid.

Ниже представлена демонстрация кода с использованием метода на основе Flexbox. Если перейти на страницу Codepen, можно поменять переменную $method на grid , чтобы увидеть альтернативное решение.

Описание каждого метода приведено ниже после демонстрации кода.

Метод с использованием Flexbox

Эффект достигается путём задания:

Как это работает

Во-первых, мы гарантируем, что благодаря свойству min-height: 100vh , высота элемента body будет равняться как минимум, высоте окна браузера. Это не приведёт к переполнению, если содержимого слишком мало (исключение – определённые мобильные браузеры), но если понадобится, позволит body увеличиться по высоте.

Установка свойства flex-direction: column задаёт поведение как у нормального потока документа в том плане, что блочные элементы занимают всё доступное место по всей ширине.

Преимуществом Flexbox является поведение при добавлении свойства margin: auto . Этот трюк приводит к тому, что внешние отступы элемента, к которому применено это свойство, забирают всё доступное пространство в указанном направлении (или во всех направлениях). Например, задание margin-top: auto оттолкнёт футер к нижней части экрана от расположенных выше элементов.

Проблема

В демонстрационном Codepen выше я добавила к элементу main свойство outline , чтобы продемонстрировать, что при использовании метода Flexbox, main не заполняет всю доступную высоту. Вот почему мы должны использовать именно трюк с margin-top: auto .

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

Метод с использованием Grid

Эффект достигается путём задания:

Как это работает

В этом случае мы также используем свойство min-height: 100vh , но затем добавляем grid-template-rows для правильного расположения элементов.

Ключевым трюком этого метода является использование специальной Grid единицы измерения fr . Единица измерения fr означает «фракция / доля» и с её помощью браузер вычисляет «долю» пространства, доступную данному элементу в определённой колонке или строке. В нашем случае элемент заполнит всё доступное пространство между хедером и футером, что одновременно является решением «проблемы» из метода Flexbox.

Что лучше?

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

С другой стороны, метод с Flexbox может использоваться в различных шаблонах с множеством блочных элементов в средней секции – например, набор элементов <article> вместо одного <main> .

В итоге, как и в случае с другими технологиями, всё зависит от проекта. Но думаю, вы согласитесь с тем, что это удивительно – иметь в распоряжении все эти современные методики.

Как прижать footer к низу экрана?

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

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

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

Для прижатия футера к низу экрана, есть несколько решений. От самого актуального до устаревшего:

1. Решение через Grid Layout для АДАПТИВНОЙ высоты футера

2. Решение через Flexbox для АДАПТИВНОЙ высоты футера

3. Решение через таблицы для АДАПТИВНОЙ высоты футера

4. Решение на нативном JavaScript для АДАПТИВНОЙ высоты футера

5. Решение через calc() для ФИКСИРОВАННОЙ высоты футера

6. Решение через абсолютное позиционирование для ФИКСИРОВАННОЙ высоты футера

Решение на flexbox .

Более универсальное в плане сопровождаемости, так как не требует задания фиксированной высоты и хаков с position: absolute . Если вам требуется также поддерживать IE 10/11, то решение включающее их поддержку находится в секции «Flexbox для Internet Explorer 10/11».

Случай с контентом на всю оставшуюся высоту:

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте margin-top: auto для footer :

Flexbox для Internet Explorer 10/11

Для того, чтобы описанные выше способы заработали в IE 10/11 нужно помнить о следующих багах браузеров:

min-height не применяется к элементу с display: flex и flex-direction: column в IE 10-11. Используйте height где это возможно.

Chrome, Opera, and Safari не учитывают минимальный размер контента непосредственных детей контейнера c display: flex . Установите flex-shrink в 0 (вместо значения по умолчанию 1 ) чтобы избежать нежелательного «сжатия».

Случай с контентом на всю оставшуюся высоту:

Если надо чтобы был отступ от контента:

CSS Grid Layout

Случай с контентом на всю оставшуюся высоту:

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте align-self: start для footer :

CSS Grid Layout для Internet Explorer 10/11

В Internet Explorer 10/11 реализована устаревшая версия модуля CSS Grid Layout. С практической точки зрения это значит, что реализация этого модуля очень сильно разнится от остальных браузеров, которые поддерживают данный модуль.

Самое главное, о чём нужно помнить, что в IE элементы не располагаются по умолчанию по свободным ячейкам по порядку, а просто кладутся друг на друга в самую первую ячейку. То есть в других браузерах значения по умолчанию grid-row : auto и grid-column: auto , тогда как в IE -ms-grid-row : 1 и -ms-column: 1 , поэтому если номер строки или стоблца элемента не совпадают с 1 , то придётся их прописывать по другому.

Оставльное — более тривиально. Часть свойств не поддерживаются (вроде grid-areas , grid-gap и т.д.), часть называются по другому или требуется другой синтаксис и могут иметь отличные умолчания.

Случай с контентом на всю оставшуюся высоту:

Если надо чтобы был отступ от контента, но контент не занимал всю высоту, то используйте align-self: start и -ms-grid-row-align: start для footer :

Похожие публикации:

1. Как добавить вертикальный скролл css
2. Как добавить скролл блоку css
3. Как убрать тень у кнопки css
4. Как увеличить вес селектора css

Как опустить footer в самый низ css

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

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

В процессе практики выделили 5 способов прижимания футера к низу окна браузера с помощью CSS.

HTML-код всех представленных способов имеет следующую структуру (отличие лишь в CSS-коде):

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

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

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

 * < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < position: relative; min-height: 100%; >.content < padding-bottom: 90px; >.footer

Второй способ

Footer прижимается вниз за счет вытягивания блока контента и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ (margin-top) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа.

 * < margin: 0; padding: 0; >html, body, .wrapper < height: 100%; >.content < box-sizing: border-box; min-height: 100%; padding-bottom: 90px; >.footer

Благодаря свойству box-sizing: border-box, мы не позволяем блоку с классом .content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.

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

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

 * < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < display: table; height: 100%; >.content

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

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

Четвертый способ

Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh, которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала.

 * < margin: 0; padding: 0; >.content

>100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.

Узнать, какие браузеры поддерживают calc() и vh, вы можете на сайте caniuse.com по следующим ссылкам: поддержка функции calc(), поддержка единицы измерения vh.

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

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

 * < margin: 0; padding: 0; >html, body < height: 100%; >.wrapper < display: flex; flex-direction: column; height: 100%; >.content < flex: 1 0 auto; >.footer

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

Как сделать текст ниже картинок и как опустить картинку в самый низ

помогите пожалуйста.Нужно как то сделать текст под картинки как на фото ( это у меня div И нужно как то опустить эту картинку в самый низ страницы ( это div )

/* * < margin: 0; padding: 0; >.navbar < height: 2.7em; display: flex; background-color: rgb(70, 67, 68); justify-content: space-between; align-items: center; >.nav-list < display: flex; width: fit-content; margin: 0 auto; list-style: none; >.nav-list a < display: flex; align-items: center; column-gap: 5px; text-decoration: none; color: white; >.navbar>img < margin-right: 10px; min-width: 19px; height: auto; width: 19px; height: auto; >*/ @font-face < font-family: 'SanFrancisco'; font-display: swap; src: url("../fonts/SFProText-Light.eot"); src: local("O"), url("../fonts/SFProText-Light.woff") format("woff"), url("../fonts/SFProText-Light.ttf") format("truetype"), url("../fonts/SFProText-Light.svg") format("svg"); >* < margin: 0; padding: 0; font-family:'SanFrancisco'; >.navbar < height: 2.7em; display: flex; background-color: rgb(70, 67, 68); justify-content: center; align-items: center; >.nav-list < display: flex; width: fit-content; list-style: none; >.nav-list a < display: flex; align-items: center; column-gap: 5px; text-decoration: none; font-size: 12px; padding: 1.5em; font-weight: 100; color: white; font-family: 'SanFrancisco'; >.navbar img < min-width: 15px; height: auto; width: 15px; height: auto; >.srv < width: 50px; >.apods < width: 25px; >.itag, .ios < width: 27px; >.cicons < display: flex; align-items: flex-end; justify-content: center; padding: 15px; column-gap: 40px; padding: 1em; font-family: 'SanFrancisco'; font-weight: 100; >.cicons a < text-decoration: none; color: black; >.cover < text-align: center; font-family: 'SanFrancisco'; >.cover>h1 < font-size: 48px; font-weight: bold; >.iphone>img < width: 1150px; height: auto; >.cover a

  
Магазин
  
Mac
  
IPad
  
IPhone
  
Watch
  
AirPods
  
TV и Дом
  
Только в Apple
  
Аксессуары
  
Поддержка

IPhone 13 ProIPhone 13IPhone 12СравнениеAirPodsAirTagiOS 15
IPhone13Pro
Просто.Нереально.
Подробнее >

Как разместить div внизу страницы

Проверьте рабочий пример. http://jsfiddle.net/gyExR/

Hussein 05 апр. 2011, в 08:37
Поделиться

Если страница длиннее, чем область просмотра, div будет перекрывать содержимое. Чтобы решить эту проблему, проверьте этот пример: matthewjamestaylor.com/blog/bottom-footer-demo.htm

grant 31 май 2011, в 01:54

Еще один источник информации о случаях «исключения из правила» — CSS-трюки: css-tricks.com/snippets/css/sticky-footer

blong 30 март 2012, в 03:10
Этот пример не работает для страниц с полосой прокрутки
fortune 25 май 2015, в 15:51
Показать ещё 1 комментарий

Вы можете использовать position:absolute;bottom:0; , если это все, что вам нужно.

fabrik 05 апр. 2011, в 08:20
Поделиться

в css: позиция: абсолютная или позиция: фиксированная

lmondria 05 апр. 2011, в 06:42
Поделиться
Или используйте липкий нижний колонтитул, если вам это нужно: ryanfait.com/sticky-footer
lmondria 05 апр. 2011, в 06:42

Комбинация position:fixed; с bottom:0; работает для меня.

Shrinivas Naik 25 фев. 2013, в 04:17
Поделиться

Об этом уже ответили, но чтобы дать немного больше контекста для не-CSS-экспертов:

  
Some content
 
down there
   

то следующий css

div.footer

расположит текст в правом нижнем углу окна просмотра (окно браузера). Прокрутка перемещает текст нижнего колонтитула.

Если вы используете

div.footer

с другой стороны, нижний колонтитул будет находиться внизу вашего окна просмотра, даже если вы прокрутите список. Тот же метод можно использовать с top: 0 и left: 0 btw, чтобы поместить элемент в верхнем левом углу.