0

Вот 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).

ответ

0

Возможно, я не понимаю ваш вопрос, но, думаю, вы имеете в виду, как вы получите содержимое div, чтобы взять остальную часть строки (независимо от того, что находится в левой части окна).

Я думаю, что решение имеет несколько шагов (предполагается, что вы можете настроить разметку):

  1. Поместите изображение в DIV и применить display: table-cell к тому, что вместо того, чтобы непосредственно к изображению.
  2. Независимо от того, какой div/контейнер обернут вокруг , ячейки нуждаются в display: table.
  3. «Содержание div» с правой стороны также нуждается в наборе display: table-cell.

При использовании display: table и table-cell, то лучше использовать обычную разметку, чтобы имитировать структуру фактического HTML table элементов.

Примечание 1: Если вы просто используете изображение для создания поля, попробуйте использовать дополнение/маркер CSS, чтобы сделать это вместо старомодного прозрачного трюка GIF. Я не совсем понял, почему вы это делаете, но на всякий случай!

Примечание 2: Если это не поможет решить вашу проблему, поставьте JSFiddle, и я буду рад вернуться! Удачи :)

+0

Да, содержание div должно занимать остальную часть строки, http://jsfiddle.net/koutsenko/g3fxh3k6/. Используемый фрагмент JS также вызывает переключение браузера, иногда это необходимо для жидкостного изображения. ** 2Note1 **: В CSS, как вертикальные, так и горизонтальные поля, рассчитанные из ** ширины ** контейнера. Но мне нужно левое поле, связанное с ** высотой ** контейнера. ** 2Note2 **: Я пробовал ваши советы, но не могу синхронизировать размеры изображения и оболочки. Можете ли вы обновить jsfiddle? –

+0

Добавлены некоторые детали схемы, важно, чтобы таблица с «запасом жидкости» должна занимать 100% высоты окна. –

+0

Почти сделано - http://jsfiddle.net/koutsenko/g3fxh3k6/8/. Если я переведу код из jsfiddle в автономный html, он будет работать по запросу.Но все же есть некоторые ошибки - «margin image» получает странный дополнительный запас в случае низкой высоты браузера. –

 Смежные вопросы

  • Нет связанных вопросов^_^