Метод Equal height columns и Opera
Jul. 28th, 2009 01:19 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
Для того, чтобы растянуть фон блока визуально на высоту родительского блока обычно используется метод, основная суть которого заключается в следующем: родительскому блоку задается
.parent { overflow:hidden; }
Дочерним блокам, которые нужно визуально растянуть, задается большой padding и равнозначный отрицательный margin, в результате фон растягивается, а лишняя часть обрезается засчет родительского блока.
Можно задать например так:
.child { padding-bottom: 37000px; margin-bottom: -37000px; }
У этого метода есть недостатки, но тем не менее он очень полезен и удобен. Верстая очередной макет, обнаружил, что в опере это метод срабатывает, только если внутренние блоки - плавающие. Иначе колонки разгоняет по высоте несмотря на overflow: hidden;.
Соответственно, для починки нужно задать
.child { float: left; }
Оригинал: http://blog.dpetroff.ru/tech/equal-height-columns-in-opera