HTML высота блоков, что бы полностью занимали 100% по высоте окна браузера?

Question

[Cheizer]

Друзья! Помогите разобраться, всю голову изломал, есть ли возможность на css3 без JS сделать неограниченное количество блоков, одинаковых по высоте? При условии что бы они занимали все пространство по высоте блока родителя, который равен высоте окна браузера. Как такое реализовать если не знаешь количество вложенных блоков?
Вот пример если количество блоков известно. Но если еще один добавит пользователь блок, с высотой 25vh, это будет трындец :(

https://codepen.io/Cheizer/pen/LjJjpr

.section{
width:100%;
height:100vh;
position:relative;
}
.block{
width:100%;
height:25vh;
}

<div class="section">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>

Comments

[Руслан Галиев]

Таблицы?..

[Cheizer]

Руслан Галиев: нет, div

[Руслан Галиев]

Роман: display:table, имею в виду

Answer 1

[AlexKeller]

Почему не просто через свойство flex?
https://jsfiddle.net/7f7nj4qc/
Скролл в блоке только из-за margin у body в iframe. Задайте ему в инспекторе margin: 0; и скролл пропадет

Comments

[Ankhena]

Стили для html и body тоже можно писать на jsfiddle https://jsfiddle.net/87v2u29j/

[AlexKeller]

Ankhena W: о, сэнкс! Чет не подумал ))

[Cheizer]

К сожалению даже flex не решает, из за плагина fullpage он своими стилями рубит высоту блоков, можно решить задав высоту .block в процентах, но количество блоков неизвестно, в этом проблема :( https://codepen.io/Cheizer/pen/LjJjpr

[AlexKeller]

Роман: Ну а посмотреть в инспекторе, что появился дополнительный див внутри section, оборачивающий все блоки? Естественно, flex начинает не работать: https://codepen.io/anon/pen/dzqmYv

[Cheizer]

AlexKeller: ,да, плагин добавляет свои дивы обертки и классы, и все на display:table и table row. И это пипец, вся история с flex разваливается.

[Cheizer]

Благодарю! Думаю добавить к класу скрипта стили флекаса решит эту проблемку :)

Answer 2

[Руслан Галиев]

https://codepen.io/ruslanredo/pen/Evpxwv

.section{
display:table;
width:100%;
height:100vh;
}
.block{
display:table-row;
width:100%;
}

Comments

[Cheizer]

Спасибо! Но немного не то.

[Руслан Галиев]

Что не так с этим решением для вашей задачи?

[Cheizer]

Руслан Галиев: я сначала не задал высоту и не работало, потом для .block дописал height:25vh; И все пошло, спасибо, думаю отлично подойдет, так как варианты на flexbox могут не везде работать.

[Руслан Галиев]

Роман: дивы пустые были, без контента? По этому могло не работать. Если в дивах есть контент, то высоту блокам (рядам таблицы) задавать не нужно.