Как свёрстать такой макет?

Question

[mixtape]

Как такой макет можно отверстать без извращений?



Критерии:
- колонка, состоящая из оранжевого и жёлтого блока, адаптируется по высоте по розовой колонке. и наоборот. как в таблицах, короче.
- содержимое оранжевого блока выравнено поверху, а-ля vertical-align: top
- содержимое жёлтого блока выравнено понизу, а-ля vertical-align: bottom
- IE9, то есть без флексбоксов и т.п.

можно, используя rowspan, создать в html полноценную таблицу, но как-то это не комильфо. есть ещё варианты?

Comments

[copal]

Вот так codepen.io/anon/pen/MKQeEJ

[mixtape]

copal: содержимое колонок может быть и больше 100% от высоты, то есть просто задать 100% высоту нельзя. кроме того, нельзя задать и min-height: 100vh, тк при малом содержимом блоков, высота колонок должна соответствовать высоте содержимого в колонках

Answer 1

[Алексей Струков]

это легко
ща напишу код
вот без флексбоксов - https://jsfiddle.net/gejsq7sq/1/
под себя подредактируете свойства и структуру
PS
сделал имитацию сетки для удобства и немного упорядочил верстку

Comments

[mixtape]

содержимое колонок может быть и больше 100vh от высоты, то есть просто задать 100% высоту нельзя. кроме того, нельзя задать и min-height: 100vh, тк при малом содержимом блоков, высота колонок должна соответствовать высоте содержимого в колонках

[Алексей Струков]

mixtape: если высота будет соответствовать содержимому, то может нарушиться структура и блоки уже не будут сохранять пропорции. Придется расчитывать высоту содержимого так, чтобы пропории сохранялись.

[mixtape]

Алексей Струков: поэтому и задал вопрос здесь

Answer 2

[Kuat Mustafin]

codepen.io/kuatmus/pen/zrRBGw

Про FlexBox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
frontender.info/a-guide-to-flexbox

Comments

[Kuat Mustafin]

Не заметил про "без флехбоксов" но все же это решение, и много ли у вас пользователей заходят с ие9?

Answer 3

[string001]

может быть помогут CSS таблицы?

Comments

[mixtape]

в тот-то и дело, можно обычную таблицу сделать через table, слив два ряда через rowspan атрибут, однако через css сделать такую таблицу невозможно. поправьте, если ошибаюсь. просто наличие table, td, tr в разметке как-то уж режет глаза...