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

loozmax @loozmax

css

CSS

Как footer прижать к низу страницы при такой разметке?

<header>
    <div class='wrapper'></div>
</header>
<main>
    <div class='wrapper'></div>
</main>
<footer>
    <div class='wrapper'></div>
</footer>

гуглил, пробовал -- ничего не получилось

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

8 комментариев

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

WapSter @wapster92 Куратор тега CSS

плохо гуглил

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

WapSter, может просто ручки кривые

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

BKaiyrbekov @BKaiyrbekov

<body> 
       <header></header>
       <main></main>
       <footer></footer>        
</body>

// style
body {
    display: flex;
    flex-derection: column;
    min-height: 100%;
}
main {
    flex-grow:  1;
}

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

Игорь Стасюк @HikariNoSekai

@loozmax

html, body {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-flow: column nowrap;
  margin: 0;
  padding: 0;
}

main {
  flex: 1 0;
}

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

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

Игорь Стасюк, а если у меня body flex-flow: row wrap; и нужно сохранить это именно так?

Написано более трёх лет назад
Игорь @invex

loozmax, попробуй так
body{
position: relative;
}
footer{
position: absolute;
margin: auto;
bottom: 0;
}

Написано более трёх лет назад
Игорь Стасюк @HikariNoSekai

Игорь, это выбъет его из ДОМ, а чаще всего это не нужно

Написано более трёх лет назад
Игорь Стасюк @HikariNoSekai

loozmax, тогда создайте дополнительный враппер и дайте ему, я увидеть не могу почему именно нужен row и он так важен

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

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

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

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

Войти через центр авторизации

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

JavaScript

+1 ещё

Средний
Как реализовать анимацию текста при выходе за границу блока?
- 2 подписчика
- вчера
- 108 просмотров
1

ответ
CSS

Простой
Как зафиксировать блок с позиционированием от родительского контейнера?
- 2 подписчика
- вчера
- 116 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как определить величину перекоса transform skew?
- 1 подписчик
- 15 апр.
- 64 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как исправить прыгающий контент у сайта?
- 2 подписчика
- 15 апр.
- 214 просмотров
1

ответ
HTML

+1 ещё

Средний
Как сделать чтобы было по 2 блока на строке, а не сразу все 4?
- 2 подписчика
- 15 апр.
- 72 просмотра
1

ответ
CSS

+1 ещё

Простой
Как сделать анимированное закрытие модального окна bootstrap?
- 1 подписчик
- 14 апр.
- 64 просмотра
0

ответов
JavaScript

+4 ещё

Средний
Как сделать эффект закруглений как на фото?
- 4 подписчика
- 14 апр.
- 2585 просмотров
2

ответа
CSS

+1 ещё

Простой
Почему 400 шрифт выглядит жирнее, чем должен быть?
- 1 подписчик
- 13 апр.
- 103 просмотра
1

ответ
HTML

+1 ещё

Простой
Как сделать border opacity при background-color?
- 1 подписчик
- 13 апр.
- 64 просмотра
1

ответ
HTML

+1 ещё

Простой
Почему при изменении transform scale моргает цвет другого текста, который к нему даже не относится?
- 1 подписчик
- 13 апр.
- 43 просмотра
0

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

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Разработать мини-приложение Windows 7-11, Linux,Macos

18 апр. 2024, в 07:22

45000 руб./за проект

Каталог AI tools

18 апр. 2024, в 01:12

150000 руб./за проект

Загрузка характеристик из xml/csv файла в карточки товаров WordPress

18 апр. 2024, в 00:58

5000 руб./за проект