Как правильно выстроить layout?

Question

[Дмитрий Тарасов]

Я решил перейти на flexbox. Начал все переводить на flex, весь layout.
В итоге возникли две проблемы:
- не могу прибить футер книзу страницы, когда контента мало.
- сайт должен отображаться как на десктопе при масштабе 350x350.

На скрине видно что когда контента мало футер не прибит.
Здесь при масштабе 350x350 тоже видно что футер не прибит.

Еще такая проблема возникает, что теги html, body и div.wrapper не занимают все область окна по ширине и по высоте.

Примерно вот так должно это выглядеть когда контента мало, то есть wrapper занимает всю высоту и ширину, а футер в самом низу joxi.ru/DrlaJBWCVyezym

Сайт profitway.net, страница новости

Короче я как-то не правильно выстраиваю свой layout.
Помогите решить данные задачи:
- прибить футер книзу страницы, когда контента мало и чтобы футер не был фиксированным по высоте.
- сайт должен отображаться как на десктопе при масштабе 350x350.
- все должно быть на flexbox.

Очень жду помощи, мучаюсь около недели.

Answer 1

[Odinokun]

Вот так "прибивается" футер на флексах https://codepen.io/Odinokun/pen/bwWoAY

Comments

[Дмитрий Тарасов]

Дмитрий, ок сделал. Вроде прибился но body, html, .wrapper не хотят во всю ширину и высоту растянуться. Что с этим делать ?
Еще проблема появилась теперь не скролится по вертикали. overflow: hidden; на .wrapper все обрезает из-за этого пропадает скрол, это все потому что поставил .wrapper height: 100%; когда был min-height: 100%: все скролилось.

Answer 2

[Максим]

jsfiddle.net/ZxupR/18 примерно так