Почему первый (левый) блок не доходит до конца?

Question

[asyasb]

пробовала float и flex; height:100% и height:100vh, но оно не работает
https://codepen.io/ggknjkb/pen/NWNQpXw

Comments

[Ankhena]

Уточните, лучше нарисуйте, кто и до какого конца должен доходить? ))))

[asyasb]

Ankhena, серый
он резко обрывается внизу, а этого не должно быть

[Ankhena]

asyasb, потому что у него стоит высота всего 100vh. Там где они заканчиваются, заканчивается и блок.

Не используйте флоаты для верстки сетки.
Для этого есть флексы и гриды.
Гридами вообще очень-очень удобно будет.

[asyasb]

Ankhena, https://habrastorage.org/webt/5f/85/9b/5f859bb0075...
https://habrastorage.org/webt/5f/85/9b/5f859bc08d0...

[Ankhena]

asyasb, так https://jsfiddle.net/op7eu5z8/

[asyasb]

Ankhena, мне сказали заменить проценты на это и float на flex, но ничего не поменялось, т е с процентами и flex было тоже самое, за гриды спасибо, попробую

[Ankhena]

asyasb, флексами не удобно.
Лишние обертки и учет высоты шапки.
Очень много букв.

В то время, когда грид все делает практически "сам".

Answer 1

[Steppp]

делай все на флексах) Забудь за флоаты)

Answer 2

[Фин Дел]

Так хотели ?

Comments

[asyasb]

да, а где Вы и что поменяли?

[Фин Дел]

asyasb, да много что )), удалил ненужные свойства, обернул во flex

[asyasb]

Фин Дел, эх, ладно, спасибо)))

[Фин Дел]

asyasb, почему не работает ? на карандаше же всё работает, скопируйте полностью как код в html так и в css

[asyasb]

Фин Дел, не Вам писала (ошиблась)

[asyasb]

Фин Дел, https://habrastorage.org/webt/5f/85/cd/5f85cd01af7...

а что мне делать, если на некоторых страницах теперь так, и на каждой этот блок разного размера

[Фин Дел]

asyasb, для #block1 задайте допустим min-width: 200px;