Исправление высоты Div для столбцов на основе% - PullRequest
Новая
       26

Исправление высоты Div для столбцов на основе%

0 голосов
/ 15 декабря 2010

У меня есть веб-страница, которую я начал по следующему адресу: http://digitalgenesis.com.au/my%20sites/Digital%20Genesis/

По существу, я после 2-х колоночного макета с 2 емкостями с жидкостью, которые отображают цвет фона до нижнего колонтитула равномерно.

В данный момент, однако, в левом столбце будет отображаться только фон вокруг количества текста. Код для 2 столбцов и содержащий его div перечислены ниже 

#container{
 overflow: hidden;
 width: 100%;
}

#col1{
 float: left;
 width: 60%;
 background:red;
}

#col2{
 float: left;
 width:40%;
 background:blue;
}

Я озадачен тем, как получить левую колонку, отображающую красный фон на всю длину страницы

Должен ли я просто прибегнуть к боковой панели фиксированной ширины, чтобы сделать ее проще?

Ответы [ 2 ]

0 голосов
/ 15 декабря 2010

Поддельные столбцы - это метод, на который стоит обратить внимание.

Но лично я решил использовать javascript, потому что он просто НАСТОЛЬКО прост.

$.fn.equalHeights = function(px) {
    $(this).each(function(){ 
            var currentTallest = 0;
            $(this).children().each(function(i){
                    if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
            });
            if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
            // for ie6, set height since min-height isn't supported
            if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
            $(this).children().css({'min-height': currentTallest}); 
    });
    return this;
};

$ ('. Equal-height'). EqualHeights ();

95% совместимость для равных высот достаточно хороша для меня БОЛЬШЕ времени.Если нет, я использую искусственные столбцы.Хотя я считаю, что эта проблема должна полностью исчезнуть с HTML5 / CSS3, когда браузеры наверстают упущенное.

0 голосов
/ 15 декабря 2010

см. Этот пример на jsFiddle . Этот подход работает, обрабатывая фоны отдельно от контента. Он вводит абсолютный фоновый div для каждого столбца. Фоны располагаются за плавающим содержимым с использованием процентов и имеют размер, чтобы заполнить высоту родительского контейнера.

примечание: , хотя мой пример размещен на jsFiddle, этот метод не включает никакой javascript. Он использует только CSS .

...