Колонки одинаковой высоты + border-bottom!

    Begin



    На хабре наверно уже миллион статей про колонки одинаковой высоты. Вы спросите зачем нам нужна еще одна статья в 1001й раз?

    Вот в чем затык



    Проблема в том, что колонки одинаковой высоты с нижней границей — не так то просто сделать… В основном, я использую метод с padding-ами, т.е. ставим:

    .column {
      padding-bottom: 32750px;
      margin-bottom: -32750px;
    }


    * This source code was highlighted with Source Code Highlighter.


    для колонок, которые должны быть одинаковой высоты,
    и помещаем эти колонки во враппер с overflow: hidden.

    НО! При этом нельзя задать нижнюю границу для колонок!

    Решение



    Все очень просто, надо обернуть враппер еще раз и внешнему указать

    #container {
      background:transparent url(images/example-6.gif) no-repeat scroll center bottom;
      float:left;
      padding-bottom:1px;
    }


    * This source code was highlighted with Source Code Highlighter.


    Мы просто указали фоновую картинку для внешнего враппера, на которой изображены границы :). Мне в текущем проекте очень помогло. Если есть еще варианты без js буду рад узнать их. Ну я думаю вам станет понятней, если посмотреть на пример: www.ejeliot.com/samples/equal-height-columns/example-6.html

    Материал нашел здесь: www.ejeliot.com/blog/61

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 20

      0
      А подвал всё равно к нижнему краю браузера не прижат, если контента меньше, чем на страницу по высоте.
        0
        Ну, подвал это отдельная тема, думаю на хабре много об этом написано. Тут главное — колонки ;)
        0
        Не пробовали решить проблему, когда надо растянуть эти одинаковые колонки как минимум на всю высоту экрана (или больше, если есть контент)? Все хорошо, кроме любимого IE, где не работает min-height.
          0
          К сожалению, пока еще не придумал как это сделать.
          • UFO just landed and posted this here
              0
              Прочитайте внимательнее, я как раз про проблему в ИЕ и писал. Не лейте воду.
          • UFO just landed and posted this here
              0
              Болею, соображаю туго, можно пример?
              • UFO just landed and posted this here
                  0
                  тут дело в том что колонки могут быть отстоящие друг от друга и нижняя граница должна быть только у колонок, а под ними, может вообще быть пусто. Причем колонки одинаковой высоты. Речь идет именно про нижний бордер.
                    +1
                    посмотрите тут csstool.ru
                    • UFO just landed and posted this here
                        0
                        похоже не поняли. Я говорю не про макет всей странице, а про 2(или больше) колонки одинаковой высоты с бордером внизу _в любом месте страницы_. У меня не стоит цель сделать им высоту 100%. это gentleman хотел 100% высоту.
                        Или опять не про то?
                +2
                  0
                  Спасибо! Хорошая статья.
                  0
                  а как вы собираетесь бороться с неконтролируемым внутренним скролом в firefox, при переходе по внутристраничным анкорам (типа <a href="#item4">)
                      0
                      Две float-колонки одинаковой высоты:
                      chikuyonok.ru/2009/06/float-columns/
                        0
                        почему в топике не упомянуто что border-bottom тут используется при фикс раскладке колонок?

                        если резина — есть ли варианты или придется использовать другой способ одинаковых колонок?

                        благодарю
                          0
                          со своей проблемой разобрался, сорри

                        Only users with full accounts can post comments. Log in, please.