Прижатый подвал, 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).
How to Align the Content of a Div Element to the Bottom
CSS allows us to align the content of a <div> element to the bottom with special techniques. Also, we can align the content to the top of a <div> , to the bottom on the left or on the right side. We’ll discuss all possible variants.
It is very easy if you follow the steps described below.
Let’s see an example and try to discuss each part of the code together.
Create HTML
- Create a <div> with the class «main». It includes three other <div> elements.
- Place an <h2> tag in the first <div>, which has a class name “column1”, write some content in it.
- The second <div> has the class with name «column2».
- The third <div> has an id with name «bottom».
Add CSS
- Use the border, height, width, and position properties to style the «main» class. The float property defines on which side of the container the elements should be placed. The position property specifies the position of the element in a document.
- Set color for the text of the first <div> . In this example, we use a «hex» value for the color.
- Use the text-align property to align the inner content of the block element.
- Use the bottom and left properties. The bottom property specifies the bottom position of an element along with the position property. The left property specifies the left position of an element along with the position property.
Let’s bring the parts of the code together and see how it works!
Example of aligning the content to the left bottom:
Result
W3docs
In the following example, the content of a <div> is aligned to the bottom on the right side.
Example of aligning the content to the right bottom:
In our next example, the content of a <div> is aligned to the bottom at the center. We set the width of the bottom <div> to «100%».
Example of aligning the content to the center bottom:
Let’s see another example, where the content of a <div> is aligned to the center with flexbox. Flexbox is a single-dimensional layout, which means that it lays items in one dimension at a time, either as a row, or column, but not both together. In the following example, we use the flex-direction property with the «column» value. The flex-direction property defines the main axis of the flex container and sets the order, in which flex items appear. The justify-content property aligns the items when the items do not use all available space horizontally. The «space-between» value is used with the justify-content property when there is space between the lines of the items.
Example of aligning the content to the bottom with Flexbox:
Below, you can see another example with the CSS align-items property. It defines the default alignment for flex items. It is just like the justify-content property but the vertical version.
Выравнивание по низу карточки
При верстке карточек товаров для каталога или аналогичных блоков, описание в карточке может значительно отличаться по объему текста. В результате, контент после этого текста располагается на разной высоте, что в большинстве случаев неприемлемо. Как это исправить?
Варианты решения
Возможные, но некорректные решения
Первый вариант — блоку с текстом можно задать фиксированную высоту, но это будет некорректно, так как неизвестно, какой объем текста будет использоваться для описания.
Второй вариант — блоку, который нужно прижать к низу карточки, присвоить position: absolute; bottom: 0; и внизу карточки сделать увеличенный внутренний отступ padding , но опять же вариант некорректен, так как придется надеяться, что этого отступа всегда будет хватать.
Корректное решение
Для корректного решения данной задачи воспользуемся display: flex
Рассмотрим простой пример
Есть замечательное свойство flex-grow: 1; , которое позволяет элементу растягиваться и занимать все доступное свободное пространство в родительском блоке, а также есть сокращенная запись этого свойства — flex: 1;
Чтобы свойство flex: 1; для блока <div ></div> заработало, необходимо родительскому блоку <div ></div> присвоить display: flex; и flex-direction: column; чтобы элементы располагались вертикально
Далее, если в ряду карточек у текста одинаковое количество строк, блоки с текстом будут одинаковой высоты, и нижний контент итак будет выровнен по низу карточки
Но если в ряду карточек имеются карточки с разным количеством текста, то карточки растягиваются по высоте самой высокой в ряду и внизу карточки образуется свободное пространство, так как у родительского блока <div ></div> установлено display: flex; , a у него по умолчанию align-items: stretch;
Это свободное пространство занимаем блоком <div ></div> с помощью свойства flex: 1; , а нижний блок с контентом прижимается к низу карточки, чего мы и добивались
The markup
As long as you have content and a footer you are good, you can apply the styling to the body if you want. Or the #app div. Where ever you like.
The styling
Do not use absolute. Use flex. Its 2020.
Do not support browsers like IE9. Its bad for developers.
If you want your content to fill the available space, which will have the same effect, you can use flex instead of margin auto
CodeSandbox demo and code available: here