Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги:

Категории

Рубрики

Настройка и сопровождение рекламного кабинета Яндекс Директ.

от 14000 

Написание постов, ведение соц сетей Ваших компаний. Формирование имиджа и контента.

от 22900 

Услуги веб дизайна под ключ.

от 29500 

Как прибить блок к низу CSS

Существует несколько способов зафиксировать блок внизу страницы. Рассмотрим два из них.

  1. Использование позиционирования и абсолютного позиционирования:
.container {
  position: relative;
  min-height: 100vh; /* минимальная высота блока равна высоте видимой области */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px; /* высота блока */
  background-color: #ccc;
}

В этом примере мы задаем высоту блока контейнера равной высоте видимой области страницы (min-height: 100vh), чтобы блок footer оказался внизу страницы. Затем мы задаем абсолютное позиционирование для элемента footer и устанавливаем его нижнюю границу внизу страницы (bottom: 0), ширину блока на 100% и высоту блока footer в 50px.

  1. Использование Flexbox:
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* минимальная высота блока равна высоте видимой области */
}
.content {
  flex: 1; /* занимает всю доступную высоту */
}
.footer {
  height: 50px; /* высота блока */
  background-color: #ccc;
}

В этом примере мы используем свойство Flexbox для размещения контейнера и блока footer на странице. Мы задаем высоту блока контейнера равной высоте видимой области (min-height: 100vh), затем используем свойство Flexbox для размещения блоков в столбец (flex-direction: column). С помощью свойства «flex: 1» мы расширяем блок «content» до всей доступной высоты, а блок «footer» остается внизу.

Оба способа позволяют зафиксировать блок внизу страницы. Выбор определенного метода зависит от ваших потребностей и настроек на сайте.

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

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

Меню

Оставить заявку

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