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

Lion Digital Agency

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

теги:

Категории

Рубрики

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

от 14000 

Услуги интернет-маркетолога для вашего бизнеса. Анализ рынка, подбор стратегии и команды, увеличение продаж и узнаваемости бренда.

от 29500 

Разработка сайтов под ключ. Работаем с такими системами, как Worpress, 1C-Bitrix, Tilda. Закажите разработку в Lion Digital и получите по настоящему продающий сайт.

от 32900 

Как сделать футер внизу страницы css

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

Самый простой способ сделать футер внизу страницы — это задать абсолютное позиционирование и фиксированную высоту для самого футера.

Например, в HTML коде перед закрывающим тегом </body> добавляем элемент футера с классом «footer»:

<footer class="footer">...</footer>

А в CSS стилях задаем следующее:

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}

В этом примере свойство position: absolute задает футеру абсолютное позиционирование внутри контейнера (обычно это body). Для определения позиции относительно нижнего края используется свойство bottom: 0. Ширина элемента задана в 100% от ширины контейнера (обычно это тоже body) и высота — 50 пикселей.

Но при таком подходе есть риск, что футер может перекрывать основное содержимое страницы, если высота футера больше, чем доступный свободный простор на странице.

Более безопасный способ решения этой задачи — использование «flexbox» — гибкой модели распределения пространства в контейнере.

Например, добавляем следующий CSS код:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

main {
  flex: 1;
}

.footer {
  flex-shrink: 0;
}

В этом примере свойство display: flex равномерно распределяет доступное пространство по вертикали внутри body. Элемент main заполняет все доступное пространство внутри body и дает возможность flexbox’у автоматически контролировать распределение свободного места на странице. Свойство flex-shrink: 0 говорит, что элемент футера не должен сжиматься, если на странице мало контента и недостаточно свободного пространства (в этом случае футер остается прижатым к нижней границе страницы, но основное содержимое страницы не перекрывается).

Также стоит убедиться, что у body и html элементов задано 100% высоты:

html, body {
  height: 100%;
}

Такие CSS стили позволяют создать «прилипающий» футер, который будет всегда оставаться внизу страницы и не перекрывать основное содержимое страницы.

Поделиться:

Комментарии

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

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

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

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

Меню

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

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