Как поделить страницу на 4 дива?

Question

[WayMax]

Как правильно сверстать такое дивами?
UPD: Точнее как правильно нижние дивы дотянуть доконца страницы?

Answer 1

[ⓒⓢⓢ]

html структура:

div.page
   div.layer.layer-top
   div.layer.layer-top
   div.layer.layer-center
   div.layer.layer-center

стили:

.page
   display: flex;
.layer
   flex: 0 0 50%;
.layer-top
   height: 100px;
.layer-center
   height: calc(100vh - 100px);

Писал на коленке, могут быть мелкие неточности, но общий вид такой

Comments

[WayMax]

Слева появляется полоса прокрутки :(

[ⓒⓢⓢ]

WayMax, слева?
1. padding\margin у родителей или border
50% по width, это ровно половина от доступной величины.
https://jsfiddle.net/ueg1arsn/1/

upd
height: calc(100vh - 100px);
100vh = 100% вьюпорта (окна) по height
calc(100vh - 100px); - от 100% height окна отнимаем 100px
Если у вас есть ещё отступы, которые влияют на height, то их надо учесть при расчёте height

[WayMax]

JRK_DV, спасибо.
Видимо дело было в padding\margin для body. А что делать если див "page" не на всю страницу, а меньше (по высоте, или по ширине, или и по высоте и по ширине)? Можно как-то заставить растягиваться внутренние дивы не по ширине и высоте страницы, а по ширине и высоте родительского дива "page"?

[ⓒⓢⓢ]

WayMax, это немного другой подход, когда отталкиваемся не от размера окна, а например от размера родителя
Например, возьмём .page на 400x300
https://jsfiddle.net/1fzz3Lsv/2/

[WayMax]

JRK_DV, спасибо.

Answer 2

[Егор Живагин]

Мне такой вариант самым нормальным кажется. Нижние блоки растянутся, минимум, до конца экрана, а если содержимого много - по высоте содержимого. В любой момент будет удобно засунуть их вертикально друг под друга.

Использовал в разметке больше 4-ёх блоков. (4 + обёртки)
Рамочки для понятности, SCSS для удобства. Можно ещё высоту верхнего блока в переменную вынести и вообще красота.

Comments

[WayMax]

Спасибо за ответ. Слишком сложно для меня.

Answer 3

[Stalker_RED]

<div class="foo"></div>
<div class="foo"></div>
<div class="bar"></div>
<div class="bar"></div>

div {
  width: 50%;
  float: left;
}
.foo {
  height: 100px;
}
.bar {
  height: 10500px; /* на самом деле это не нужно, пусть тянется по контенту */
}

https://jsfiddle.net/0twccam4/

Comments

[WayMax]

Как поделить пополам и как задать высоту в пикселях и понимаю. Не понимаю именно то как дотянуть нижние дивы доконца страницы.