@toluolus

Верстка блока с height: 100% для различных браузеров

Упрощенная схема структурного блока представлена по ссылке jsfiddle.net/6snyE/6

Ключевые требования:
1) высота блока должна определятся высотой изображения в блоке с классом block-right
2) содержимое блока с классом title должно отображаться в правом-верхнем углу блока block-left
3) содержимое блока с классом icon должно отображаться в правом-нижнем углу блока block-left

Решение представленное по ссылке относительно корректно выполняется в браузере Firefox последней версии
Единственный недостаток - высота блока block-right на несколько пикселей больше размера вставленного изображения. Причину такого поведения я найти не смог.

Если же открыть код по ссылке в браузерах Chrome, Opera или Safari, то мы можем увидеть, что высота блока с классом container не приобретает значение высоты блока block-left, несмотря на наличие свойства height: 100%;
Использование min-height вместо свойства height проблемы не устраняет.

Прошу помощи сообщества в верстке кросс-браузерного решения удовлетворяющего ключевым требованиям, указанным выше.
  • Вопрос задан
  • 2431 просмотр
Решения вопроса 2
@toluolus Автор вопроса
Нашел хак решающий вопрос для различных браузеров. Решение описано по ссылке 100% высоты в ячейке(display:table-cell) таблицы(display:table)
Ответ написан
Комментировать
@Sunify
codepen.io/sunify/pen/fomyK
Не проще абсолютами?
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
По-моему, проблема в том, что Вы пытаетесь сверстать таблицу блоками.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы