Подвал

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

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

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

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

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

     html, body < height: 100%; margin: 0; >.wrapper < min-height: 100%; /* Равно высоте подвала, */ /* но с учётом margin-bottom у последнего дочернего элемента */ margin-bottom: -50px; >.footer, .push  
  

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

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

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

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

     html, body < height: 100%; margin: 0; >.content < min-height: 100%; >.content-inside < padding: 20px; padding-bottom: 50px; >.footer  
 
  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

     body < margin: 0; >html < height: 100%; >body < min-height: 100%; display: grid; grid-template-rows: 1fr auto; >.footer  
  

Источник

Problem

If you are new to web development and have created some HTML page before then you may be in a situation where you find that your footer is not at the bottom of page and there is white space at the bottom because there is not much content.

here is simple html code that produce this result which is not we want.

  
This is Header.
 
 
This is main content.
 
   

As you can see there are not much content so my footer is not in the bottom of the page. Technically it is bottom of the page but our page is not long enough.

Solution

Setting body height

We can set our body min height to 100vh that will make our page at least as long as screen height But it will not solve our problem.

Setting margin top on footer

We can set margin-top on footer element that will make our footer to stay at the bottom of the page but when we have multiple pages and every page has different content length we have to set right amount of margin on every page one by one.

Using Flexbox

1. First set the min-height of body to 100vh. min-height: 100vh; .
2. Set the body display to flex display: flex; and flex-direction to column flex-direction: column; .
3. Select footer element (of whatever you want to stick to bottom) and set top margin to auto margin-top: auto; .

Your CSS should look something like this.

And the problem should be fixed.

Bonus: Align content vertically center

When you don’t have much content to fill the full height of screen like simple login form, you you may want to align your content vertically center.
To do this just remove margin top from footer and set margin top and bottom to auto margin: auto 0; on your main content (in my case article element) or margin: auto; to center it on both direction (vertically and horizontally) and it will make content align to center.

Your CSS should look something like this.

Источник

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

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

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

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

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

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

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

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

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

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

body < min-height: 100vh; display: flex; flex-direction: column; >footer < margin-top: auto; >/* Опционально */ main < margin: 0 auto; /* или: align-self: center */ max-width: 80ch; >

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

Во-первых, мы гарантируем, что благодаря свойству 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> .

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

Источник