Как выравнивание блок по высоте экрана?

Question

[RushV]

Здравствуйте!
Как можно реализовать такую вещь автоматическое выравнивание блока div по высоте монитора?

Просто как правило без контента внизу монитора образуется щель пустое место внизу футора.

Answer 1

[Виталий Першин]

С этим легко справляются flexbox

Прижимаем футер и оставляем пустое пространство между контентом:
https://codepen.io/L2Banners/pen/oPwvjo
Растягиваем контент на всю доступную высоту:
https://codepen.io/L2Banners/pen/yxXLGE

Comments

[RushV]

Да это работает, только когда нет текста на странице, а когда добавляешь текст то всё в вперемешку

[Виталий Першин]

RushV, Потому что я задал фиксированную высоту для примера, сейчас исправлю

[Виталий Першин]

RushV, Исправил фиксированную высоту на минимальную. Теперь если блоки будут заполнены контентом, то они просто будут тянуться по высоте. В общем полная динамика и никого js

[RushV]

Тоже не катит на больших мониторах образуется пустота

[Виталий Першин]

RushV, О какой пустоте идет речь? При любом размере экрана у вас футер будет прижат к подвалу, если вы все правильно сделаете. При чем высота любого блока может быть какой угодно, это единственное адекватное решение в 2018 году. Все решения на js и прочие костыли это устарело уже года так 3 назад

[Виталий Першин]

RushV, Я кажется понял о чем, вы) Вм нужно блок контента растянуть на все пустое пространство? Сейчас будет

[RushV]

Вот пустое место ,это страница без контента.
Например если человек зашёл на страницу без контента как обычно бывает внизу образуется пустота вот:

Как бы растянуть блок контента вниз что автоматически регулировать высоту экрана монитора

[Виталий Першин]

RushV, Если у вас остается пустота внизу значит вы неправильно адаптировали данное решение под вашу разметку.

[RushV]

Хотел сделать на js не получилось
пришлось вот сделать min-height: 30vh;
А чем плох решение на js ? Реализация на js, получить высоту видимой области, получить высоту блоков, рассчитать отступы, добавить отступы такое сложно сделать?

[Виталий Першин]

RushV, По поводу js, Зачем использовать костыли? Нужно это делать, когда нет простого решения. Это все уже решается через css, при чем полностью динамически. То что у вас не получилось с первого раза, это просто нехватка опыта. Вы можете показать мне свой сайт и я постараюсь объяснить, как вам поступить конкретно в вашем случае.

Answer 2

[Максим Тимофеев]

Если на js, то получить высоту видимой области, получить высоту блоков, рассчитать отступы, добавить отступы
Но мне кажется проще css(flex):
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

Answer 3

[Dima Polos]

Можно поискать что-то типа "прибить футер", 100vh, выше писали про js, самый лучший способ в плане кроссбраузерности, и как хороший вариант flex, flex-direction column.