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

loozmax @loozmax

css

CSS

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

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

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

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

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 и CSS

3 месяца

Далее
Skillbox

Веб-вёрстка 3.0

3 месяца

Далее
OTUS

HTML/CSS

3 месяца

Далее

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

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

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

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

HTML

+1 ещё

Средний
В какую сторону копать решение чтобы решить проблему с наложением?
- 1 подписчик
- 22 нояб.
- 117 просмотров
0

ответов
HTML

+1 ещё

Простой
Как растянуть вложенный блок внутри других блоков на максимальную длину, но не более чем на ширину страницы?
- 1 подписчик
- 21 нояб.
- 123 просмотра
0

ответов
CSS

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

ответа
CSS

Простой
Можно ли использовать функцию calc() в медиазапросах?
- 1 подписчик
- 13 нояб.
- 223 просмотра
1

ответ
CSS

+1 ещё

Простой
Как оптимизировать svg картинку?
- 1 подписчик
- 11 нояб.
- 190 просмотров
1

ответ
CSS

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

ответов
JavaScript

+2 ещё

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

ответ
PHP

+2 ещё

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

ответов
CSS

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

ответа
CSS

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

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

WordPress (PHP, HTML/CSS) разработчик

Epiic

от 90 000 ₽

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

ITK academy • Нижний Новгород

от 50 000 до 90 000 ₽

Fullstack-разработчик (Python и React.JS)

Chad AI

от 200 000 ₽