Как растянуть div по горизонтали, если ему предшествует изображение с высотой 100%?

Question

[koutsenko]

Есть div, которому предшествует хитрый отступ слева - ширина отступа должна зависеть от высоты окна, это я сделал через встраивание картинки с нужными пропорциями.

Как заставить div занять по горизонтали все оставшееся место справа?
Без js и чтобы решение подходило для IE9 и Android Browser...

<--------------------- 100% WINDOW WIDTH ---------------->
,--------------------------------------------------------, ^
||                     ||                |               | |
||     IMG 1x10 px     ||  CONTENT DIV   |  FREE SPACE   | |
|| display: table-cell ||                |               | | 100% WINDOW HEIGHT
||   height 100 %      ||  height 100 %  |               | |
||                     ||                |               | |
'--------------------------------------------------------' ь

Картинка (table-cell позволит ее пропорционально не только увеличить, но и уменьшить):

<img src="data:image/gif;base64,R0lGODdhAQAKAIAAAAAAAP///ywAAAAAAQAKAAACA4SPBQA7" style="height: 100%; display: table-cell;"/>

UPD Почти работающий вариант решения - jsfiddle.net/koutsenko/g3fxh3k6/8 , глючит на малых высотах - у черной картинки-распорки появляется рандомный дополнительный отступ справа...

ИТОГ Сделать на старом CSS без vh units задачу невозможно. Сделал на Javascript.

Answer 1

[Avivar]

Надеюсь правильно понял Вас jsfiddle.net/u8wwuohv

Comments

[koutsenko]

Увы, не совсем. Дополнил схему вопроса, итоговая "таблица" должна быть занимать всю высоту окна. Вот здесь я пытался сделать - jsfiddle.net/koutsenko/g3fxh3k6 . Черная распорка занимает всю высоту окна и имеет ширину в зависимости от высоты окна, это видно если изменить размера окна по высоте. Надо бы разместить div справа от нее так, чтобы он был 100% высоты и занял всю оставшуюся ширину таблицы.

Немного технических деталей:
- на приведенном jsfiddle есть кусочек js, который обеспечивает принудительный reflow браузера, без которого родительские контейнеры распорки могут не всегда перерисовываться
- распорки это прошлый век, но margin и padding всегда зависят от ширины, мне же надо отталкиваться от высоты
- в CSS3 есть всякие штуки вроде vh, vw, column layout - они в IE9 не работают, увы

Спасибо за внимание

[Avivar]

koutsenko: jsfiddle.net/g3fxh3k6/5 после срабатывания изменения размера окна, отображается как надо. А почему Вы не хотите при изменения размера экрана тем js менять и размер отступов?

[koutsenko]

Avivar

> А почему Вы не хотите при изменения размера экрана тем js менять и размер отступов?

Смешанную js- и css- верстку тяжело кодить и править. Если делать на чистом js, то код получается тяжелый, начинает тормозить сам ресайз (много DOM-элементов), а если троттлить реакцию на ресайз, то появляется видимая задержка. Так что, верстаю на css с очень редкими исключениями навроде плавного ресайза шрифтов через js (и тот с троттлингом). Плюс в верстке задействованы aspect ratio (портретные и ландшафтные режимы) посредством css3 media queries, и это очень удобные вещи...

Касаемо примера - почти работает. Если затроттлить в js изменение шрифта ( jsfiddle.net/koutsenko/g3fxh3k6/8 ) и выписать всё из jsfiddle в отдельный html, то и при запуске отображается как надо, и шрифт не сломается (безвовратно огромный) если хаотично туда-сюда ресайзить окно. Осталось понять, почему на маленькой высоте у распорки появляется какой-то дополнительный отступ... Когда делал сам через display: table, то этот отступ вылез сразу и вообще не хотел уходить, из-за чего я сразу отмел подобную реализацию...