Вот div и прозрачный gif, используемый как левое поле с шириной, связанной с высотой.
Например, если высота окна составляет 480 пикселей, «margin» будет 48 пикселей.
Изображение полной высоты жидкости и div в одной строке. Div должно занимать оставшееся горизонтальное пространство.
Итак, как я могу сделать контент div, чтобы оставить оставшуюся ширину?
Решение должно быть не-js и IE9 & Совместимость с Android.
N.B. изображения есть «дисплей: стол-ячейка», потому что, кажется, только так он может сжиматься, а не только расти ...
<--------------------- 100% WINDOW WIDTH ---------------->
,--------------------------------------------------------,^
|| || | | |
|| IMG 1x10 px || CONTENT DIV | FREE SPACE | |
|| display: table-cell || | | | 100% WINDOW HEIGHT
|| height 100 % || height 100 % | | |
|| || | | |
'--------------------------------------------------------' ь
Почти рабочим раствор: http://jsfiddle.net/koutsenko/g3fxh3k6/8/ Работы, как ожидается, при работе автономного HTML, а не в скрипке , Но есть проблемы: при малой высоте «изображение поля» имеет дополнительный запас.
UPD: У меня есть одна задача, использующая javascript. Кажется, решить эту задачу невозможно только с помощью старого CSS (без единиц vh).
Да, содержание div должно занимать остальную часть строки, http://jsfiddle.net/koutsenko/g3fxh3k6/. Используемый фрагмент JS также вызывает переключение браузера, иногда это необходимо для жидкостного изображения. ** 2Note1 **: В CSS, как вертикальные, так и горизонтальные поля, рассчитанные из ** ширины ** контейнера. Но мне нужно левое поле, связанное с ** высотой ** контейнера. ** 2Note2 **: Я пробовал ваши советы, но не могу синхронизировать размеры изображения и оболочки. Можете ли вы обновить jsfiddle? –
Добавлены некоторые детали схемы, важно, чтобы таблица с «запасом жидкости» должна занимать 100% высоты окна. –
Почти сделано - http://jsfiddle.net/koutsenko/g3fxh3k6/8/. Если я переведу код из jsfiddle в автономный html, он будет работать по запросу.Но все же есть некоторые ошибки - «margin image» получает странный дополнительный запас в случае низкой высоты браузера. –