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

Lion Digital Agency

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

теги:

Категории

Рубрики

Услуги SEO копирайтера под ключ. Пишем качественные тексты.

от 950 

Продвижение на авито под ключ. Получите клиентов в первую неделю. Создадим до 50тыс похожих объявлений!

от 29500 

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

от 22900 

Как прижать футер к низу страницы css

Если вы хотите прижать футер к низу страницы на CSS, здесь несколько способов это сделать:

  1. Метод Flexbox

С помощью Flexbox можно легко прижать футер к нижней части экрана. Для этого установите свойства display: flex; flex-direction: column; для родительского элемента страницы, затем установите flex: 1; для основного контейнера сайта и margin-top: auto; для футера.

<body>
  <div class="site-content">
    <header><p>Header</p></header>
    <main><p>Main content</p></main>
  </div>
  <footer><p>Footer</p></footer>
</body>
html, body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.site-content {
  flex: 1;
}

footer {
  margin-top: auto;
}
  1. Метод Grid

Также можно использовать Grid для распределения страницы на строки и столбцы и прижимать футер к нижней части страницы. Для этого установите свойства display: grid; grid-template-rows: auto 1fr auto; для родительского элемента страницы, где 1fr означает, что основной контент будет занимать все доступное пространство между заголовком и футером.

<body>
  <div class="site-content">
    <header><p>Header</p></header>
    <main><p>Main content</p></main>
  </div>
  <footer><p>Footer</p></footer>
</body>
html, body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.site-content {
  grid-row: 2 / 3;
}

footer {
  grid-row: 3 / 4;
}
  1. Метод position: fixed

Установите height: 100%; и position: fixed; для футера, и он будет зафиксирован внизу страницы. Учтите, что это может иметь нежелательные последствия для пользователей с маленькими экранами.

<body>
  <div class="site-content">
    <header><p>Header</p></header>
    <main><p>Main content</p></main>
  </div>
  <footer><p>Footer</p></footer>
</body>
html, body {
  height: 100%;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80px;
}

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

Поделиться:

Комментарии

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

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

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

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

Меню

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

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