Как прижать Footer к низу страницы?

Question

mipfikus @mipfikus

Вообще я не знаю, но

HTML
CSS

Как прижать Footer к низу страницы?

Не получается прижать footer к низу страницы.
Вот пример проблемной страницы:
dimteh.lv/ru/testovaya-stranicza.html
footer не фиксированной высоты.
Как это можно сделать?

Вопрос задан более трёх лет назад
1028 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Помогут разобраться в теме Все курсы

Яндекс Практикум

Профессиональная вёрстка на HTML и CSS

3 месяца

Далее
Stepik

Основы HTML и CSS

2 недели

Далее
OTUS

HTML/CSS

3 месяца

Далее

Пригласить эксперта

Ответы на вопрос 3

3 комментария

mipfikus @mipfikus Автор вопроса

Спасибо за ответ! Картинка на фоне стала во всю высоту страницы, а контент нет. Что делать?

Написано более трёх лет назад

xdevelx @develx Куратор тега CSS

mipfikus, Здесь уже придется немного верстку поменять - обернуть контейнеры внутри .page-wrapper в блок.

<body>
  <div class="page-wrapper">
    <div class="page-content">
      <div class="container"></div>
      <div class="container"></div>
    </div>
    <!-- тут модалки -->
    <footer class="footer-1"></footer>
  </div>
</body>

и

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.page-content {
    flex-grow: 1;
}

Написано более трёх лет назад

xdevelx @develx Куратор тега CSS

mipfikus,
Изначально код писал не я, сам я в таком мало разбираюсь

В том то и проблема, что здесь изначально верстка кривая - сейчас сложно что то сделать. .page-content то идет до самого футера, но контент внутри контейнеров небольшой по высоте. Изначально нужно было все ложить в один контейнер и растягивать на всю высоту. Сейчас либо вообще переверстывать по нормальному, либо очень много стилей добавлять во вложенные элементы и их содержимое, что само по себе костыль и трата времени.

Написано более трёх лет назад

1 комментарий

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

CSS

Средний
Как найти стили в шаблоне Битрикс?
- 1 подписчик
- 06 нояб.
- 127 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать горизонтальный скролл стрелками?
- 1 подписчик
- 05 нояб.
- 147 просмотров
0

ответов
PHP

+2 ещё

Простой
Создание элемента с необычной формой и прозрачным фоном и рамкой?
- 1 подписчик
- 03 нояб.
- 156 просмотров
0

ответов
CSS

Простой
Как выстроить 4 блока, чтобы расстояния были одинаковые на флексах?
- 1 подписчик
- 31 окт.
- 134 просмотра
2

ответа
CSS

Простой
Как правильно задать размеры блоков?
- 1 подписчик
- 31 окт.
- 98 просмотров
1

ответ
HTML

Простой
При клике на кастомную кнопку “Скачать” не происходит переход, хотя JS-обработчик отрабатывает. Как решить?
- 1 подписчик
- 29 окт.
- 173 просмотра
0

ответов
HTML

+1 ещё

Простой
Как создать карточки в рядах со смещением?
- 1 подписчик
- 28 окт.
- 119 просмотров
1

ответ
CSS

Простой
Как на css сделать в карточке товара появление блока кнопок при наведении курсора?
- 1 подписчик
- 27 окт.
- 175 просмотров
2

ответа
CSS

Простой
Как такое сверстать?
- 1 подписчик
- 26 окт.
- 317 просмотров
2

ответа
CSS

Простой
Поему не срабатывает стиль шрифта?
- 1 подписчик
- 20 окт.
- 183 просмотра
0

ответов
Показать ещё Загружается…

PHP-разработчик

FoodSoul • Калининград

от 180 000 до 250 000 ₽

Специалист технической поддержки (чат)

WebSoft

от 50 000 до 70 000 ₽

Frontend Developer (React + Node.js)

Alfabet Service

от 1 000 до 2 000 $

Answer 1 · 2020-06-12 15:24:07

xdevelx @develx Куратор тега CSS

Web developer

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.footer-1 {
    margin-top: auto;
}

Ответ написан более трёх лет назад

3 комментария

Answer 2 · 2020-06-12 20:50:38

Попробуйте дать для footer свойство position: absolute; bottom: 0; left:0; width:100%;

Ну и для основного блока padding-bottom по высоте footer

Answer 3 · 2020-06-13 11:33:03

А что за двойные квадратные скобки, это в чем так модули подключаются? На счёт прижать футер я хз, старый способ типа html, body,
.wrapper: height 100%;

Как прижать Footer к низу страницы?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт