Высота блока на весь экран?

Question

[grinch_asd]

Здравствуйте.
Задача такова. Максимальная высота экрана 100%. т.е. полоса прокрутки не должна появляться ни в коем случае. Есть хедер и футер с фиксированной высотой. Расположены они соответственно наверху и внизу экрана. Нужно добавить блок между ними чтобы его высота полностью занимала свободное место между хедером и футером, независимо от контента. Все это нужно сделать без использования js.

Comments

[Adamos]

Делаете блок 100% х 100%, паддинг: 0 0 высота_футера 0, позиция: относительная.
Вкладываете в него хедер, футер (задав ему абсолютную позицию снизу) и свободный блок.
Примерно так.

Answer 1

[levchak0910]

<div id="wrap">
    <header></header>
    <main></main>
    <footer></footer>
</div>

html, body {margin: 0}
#wrap {
    border: 2px solid #000;
    display: flex;
    flex-flow: column nowrap;
    width: 100vw;
    height: 100vh;
}
header {
    flex: 0 0 100px;
    background: green;
}
footer {
    flex: 0 0 150px;
    background: blue;
}
main {
    flex: 1 1 auto;
    background: yellow;
}

Answer 2

[aloky]

flex поможет)

Answer 3

[Петр]

Смею предположить, что стоит попробовать в процентах задавать такое.
Скажем header и footer по 20 процентов а 60 процентов нужный вам контейнер.
Такое?

Comments

[grinch_asd]

не совсем. т.к. у хедера и футера должна быть фиксированная высота в пикселях

[Петр]

grinch_asd, есть еще такая штука.
https://webbeaver.ru/future/viewport-unit/