«Резиновая» ширина колонок + эмуляция высоты

Крайне редко мне доводится верстать полностью резиновые макеты, т.е. когда требуется «резиновая» ширина не только для самой страницы, но и для всех колонок (как правило, боковые колонки на моей практике бывают фиксированной ширины).

И вот недавно такой случай попался. И это меня немножко поднапрягло =) Пытался искать в Интернете решение похожей задачи, но совсем ничего не нашел.

Задача

  • Полная «резина»: и ширины страницы, и ширины 2-х колонок (контент + сайдбар).
  • Необходимость эмулировать одинаковую высоту колонок. У сайдбара фон в виде серого цвета. Нужно было сделать так, чтобы серый фон всегда тянулся до футера, независимо от количества содержимого в той или другой колонке.

В моем случае было исключено применение метода padding-bottom: 32767px; margin-bottom: -32767px по той простой причине, что я верстал под WordPress, а там используются ссылки-якори, и, в результате применения данной методики, при переходе по таким ссылкам в ряде браузеров с экрана прячется все, что находится до якоря.

Решение

Единственное, что я смог придумать — создать дополнительный пустой блок, который позиционировать абсолютно, придать ему 100% высоты и поместить под сайдбаром, задав соответствующий фон.

Разметка выглядит следующим образом:

<div id="wrapper">
	<div id="column"></div>
	<div id="header"></div>
	<div id="middle">
		<div id="content"></div>
		<div id="sidebar"></div>
	</div><!-- #middle-->
</div><!-- #wrapper -->
<div id="footer"></div>

Для дополнительного блока #column я написал следующие стили:

#column {
	position: absolute;
	top: 0;
	right: 0;
	width: 39%;
	height: 100%;
	background: #E9E9E9;
}

В результате получилось то, что мне было нужно, за исключением одного момента. IE6 не умеет растягивать блок на 100% высоты родительского блока, если задано свойство position: absolute. Т.е., как обычно, потребовался костыль. И он был вставлен следующим образом:

body {height: 100%}
* html #column {height: 999%}

Я указал высоту блоку #column не 100%, а значительно больше предполагаемой высоты всей страницы. А для того, чтобы в IE6 этот блок растягивался в принципе, потребовалось указать 100% высоту тегу body.

Пример

Результат, того, что у меня вышло.

В итоге остался единственный недочет — в IE6 мне не удалось «спрятать» ту часть блока #column, которая уходит под футер. Единственное решение, которая я вижу в такой ситуации — прижать «подвал» к нижнему краю окна браузера, однако это не всегда бывает необходимо.

P.S. Буду рад услышать от вас более элегантные варианты решения выше описанной задачи, если таковые имеются.

Обновление от 15.02.09

Благодаря помощи Сергея (за что выражаю ему благодарность), удалось довести макет до кроссбраузерного состояния. В вышеуказанном примере потребовалось сделать всего 3 изменения:

  1. Высоту блока в IE6 #column необходимо указать НЕ в процентах:
    * html #column {height: 9999em}
    
  2. Сам блок #column нужно перенести в конец контейнера #middle.
  3. Сайдбару #sidebar указать параметр z-index, чтобы он был выше слоя #column.

Кроссбраузерный пример.

Тему можно считать закрытой. Все свободны =)

Комментарии (43)
  1. 1

    В закладки, как раз эмуляцию высоты не знал как делать.

  2. 2
    @

    Привет, Дима.
    «Пытался искать …»

    В сети такая инфа есть.
    Правда линк потерял :(
    У себя на блоге в Утопии… дал анонс на продолжение темы, но все руки не доходят опубликовать.
    Вот такой пример должен решить все твои проблемы :)
    absolute-columns_cl

  3. 5
    Санитар

    То, что легко и триаивально делается таблицами, ага…

  4. 6
    @

    Дима, посмотри: dimox_gordi_strat
    Пришлось убить #wrapper
    Также тебе надо в IE6 стили поправить, при наведении курсора на «Вытягиваем колоку» по горизонтали есть смещение.
    В стилях комментариями подсветил то, что добавил.

  5. 8
    Валентин
    @

    а вот как бы сделать подобную верстку ток трехколоночную со средней резиновой

  6. 9
    @

    Спасибо Вам за статью!

    >Буду рад услышать от вас более элегантные варианты решения выше описанной задачи, если таковые имеются.
    Написал отзыв на вашу статью у себя в блоге, буду рад обратной ссылке.

    На счет элегантности зарекаться не буду, но абсолютного позиционирования и строчек вида height: 999% мне удалось избежать.
    Пример — http://installero.ru/examples/liquid-columns/

    Единственное, чего я так и не смог понять — это кривого поведения при открытии дополнительного текста в сайд-баре в ie6. Но это к верстке отношения (вроде бы) не имеет, если сделать статический код, все работает отлично. Подскажите, если не сложно.

    • 10
      @

      но абсолютного позиционирования и строчек вида…

      А теперь попробуем сделать min/max-width и эмуляцию оного для IE6 блоку .wrapper, задать background-color или background:url(…) для body
      Оптимизма думаю по убавиться :)
      Одинаковой высоты колонок, как не бывало :)

      Единственное, чего я так и не смог понять…

      А над этим давно бьются :)
      И за два часа вам не удалось решить проблему :)
      Высказывания на вашей тест-странице сильно позабавили, особенно:

      На самом деле, для того, чтобы научиться адекватно верстать страницы в html+css, необходимо всего несколько дней…

      Если бы все было так просто :)
      Без обид.

      • 11
        @

        А теперь попробуем сделать min/max-width блоку .wrapper

        А зачем? Если надо-таки ограничить все это по ширине, заверните в ещё один div и задайте ему max-width.

        И за два часа вам не удалось решить проблему!

        Вам виднее, конечно ;)

        • 12
          @

          …заверните в ещё один div…

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

          • 13
            @

            Введение дополнительного контейнера потянет за собой проблему равной высоты колонок при попытке сделать 100% высоту макета

            Вы хотите сказать, что не получится одновременно и ограничить макет по ширине и прижать футер к полу, растянув фон?

            • 14
              @

              Вы хотите сказать

              А вы попробуйте :)
              Про IE6 не забудьте :)

              У себя на блоге этому много статей посвятил, как раз решая эту проблему, посмотрите, почитайте.
              Повторюсь не все так просто, проблема имеет место быть и ваш пример яркое тому подтверждение.

  7. 15
    @

    А вы попробуйте :)

    Для FF3, IE7, Opera — получилось. Для IE6 — не вышло. Все-таки игрушки крепко к полу прибиты :)
    Но в совокупности с автором поста у нас полный набор. Я привел пример без прижатия футера к земле. Автор — с прижатием. Оба примера (вроде бы) отлично ограничиваются по ширине и высоте.

  8. 19
    site-creator
    @

    В итоге остался единственный недочет — в IE6 мне не удалось “спрятать” ту часть блока #column, которая уходит под футер

    а вот так не пробовали ?
    #middle { zoom:1; position:relative; overflow:hidden; z-index:2; }
    #sidebar { position:relative; z-index:2; }

    и блок #column поместить в middle

  9. 20
    Riska

    site-creator только что попробовала, но это не поможет, возможно это не то, либо, я что то не так сделал.

  10. 22
    Юля

    Большое спасибо. Надо обязательно попробовать.

  11. 23
    Roman

    Есть еще более интересный вариант, пример:
    http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

    • 24

      Спасибо за ссылку! Очень интересная техника.

    • 25
      @

      Есть еще…

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

      • 26

        На счет практичности, конечно же, под вопросом. Но вот сам способ мне понравился, такая заковыристая методика =)

      • 29
        Roman

        Причем, в нем не будет возможности сделать каждому блоку отдельную свою рамку (border).

        В данном случае, я думаю, что Вы просто поспешили с ответом.

        • 30
          @

          В данном случае…

          Возможно.
          Но посмотрев на нагромаждение лишних блоков, нет никакой охоты разбираться :)
          Возьмите за основу скриншот по моей ссылке на статью из комментрария № 2, в статье есть линки на примеры, если удастся сделать нечто похожее, буду только рад, но учитывая принцип «необходимо и достаточно» и посчитав количество нужных для этого контейнеров к какому выводу вы придете?
          Так стоит ли огород городить?

  12. 31
    Dew

    Люди, человеки!
    Я конечно все понимаю, но за конструкцию
    * {
    margin: 0;
    padding: 0;
    }

    руки отбивают

  13. 33
    @

    А как насчет 2-х сайдбаров по бокам фиксированной ширины, а центральную сделать резиновой?

  14. 35
    namez
    @

    Dimox! читаю вас с удовольствием и помощи между делом получить хочу, ткните ссылкой, примером на 3-x колонучную резину где центр фикс а сайдбары в процентах

    с уважением Сергей.

  15. 37
    ermoha
    @

    Привет. Прочитал статью, комментарии. Но так и не нашел способа с прижатым подвалом к низу экрана. За основу я брал метод с position:absolute.

  16. 39
    ermoha
    @

    У меня с position:absolute тянется блок «column» в зависимости от контента. Больше никак. Так у всех?

  17. 40
    Aleksei
    @

    Привет Dimox.
    Подскажи как сделать резиновым шаблон. Я хочу сделать на wordpress блог картинок. В кратком описании (до кнопки подробнее ) я вставляю картинку маленького разрешения, а в подробном картинку в полном разрешении. Так при обычном шаблоне картинка вылезает из шаблона и смотрится очень тупо. Я хочу чтобы шаблон растягивался под картинку. Почему я хочу это сделать?
    потому что я пробовал так делать на ucoz и гугл это очень хорошо оценил, но на ucoz это делать очень долго( я про заполнение alt и описаний к картинке).
    Заранее спасибо.

  18. 41
    kirill
    @

    А вот у меня на фоне сайта стоит картинка http://nlt-povolje.ucoz.org/ она не умещается в некоторые экраны как мне сделать чтобы он регулировался сам