can3p (can3p) wrote,
can3p
can3p

Метод Equal height columns и Opera

Для того, чтобы растянуть фон блока визуально на высоту родительского блока обычно используется метод, основная суть которого заключается в следующем: родительскому блоку задается

.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
Tags: background, css
Subscribe
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 2 comments