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

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 и он так важен

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

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

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

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

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

HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 4 часа назад
- 45 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 5 часов назад
- 28 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 9 часов назад
- 45 просмотров
0

ответов
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 16 часов назад
- 85 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- вчера
- 63 просмотра
1

ответ
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- вчера
- 54 просмотра
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- 20 нояб.
- 100 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 85 просмотров
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 72 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?
- 1 подписчик
- 19 нояб.
- 106 просмотров
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

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

от 2 000 до 4 000 $

Смонтировать видео

23 нояб. 2024, в 01:31

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

Настроить сайт

23 нояб. 2024, в 00:16

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

Разобрать текущий ETL-процесс

22 нояб. 2024, в 23:55

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