Как расширить UL или DIV, чтобы заполнить высоту его контейнера - PullRequest
Новая
       9

Как расширить UL или DIV, чтобы заполнить высоту его контейнера

2 голосов
/ 12 августа 2011

Я использую несколько UL (столбец), чтобы обеспечить параллельные столбцы в нижней части моей страницы.Каждый UL находится в DIV (columnContainer).Эти DIV находятся в другой DIV (полке) (а затем все черепахи вверх).

Я использую левую границу columnContainer DIV, чтобы создать вертикальную линию между каждым столбцом содержимого.Поскольку содержимое в каждом UL имеет разную высоту, вертикальные линии тоже.

Я хочу, чтобы все вертикальные линии были одинакового размера.Я думаю, это означает, что мне нужно, чтобы мои UL столбцов расширяли свою высоту, чтобы соответствовать самой высокой UL, или мне нужно, чтобы DIV columnContainer увеличивал их высоту, чтобы заполнить их родительский элемент (который, безусловно, контролируется по высоте самым высоким дочерним UL?)1005 *

Количество содержимого и количество столбцов изменяется динамически, поэтому я не могу просто определить минимальную / максимальную высоту.

Образец версии моей проблемы можно найти по адресу: http://pastebin.com/ti5u41Ey

любая помощь всем приветствуется

Ответы [ 2 ]

3 голосов
/ 12 августа 2011

К сожалению height: 100%; не будет работать, если в родительском контейнере не указана высота.

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

Более гибкий подход заключается в использовании JavaScript.Вот несколько jQuery, которые должны помочь: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script>
$(document).ready(function(){
    recalcColumnHeights ();
    $(window).resize(recalcColumnHeights);
});


recalcColumnHeights = function (){
    tallest = null;
    $('.wptheme-expandedQuickLinksShelfColumnContainer')
        .each(function(){
            if (tallest == null || $(this).height() > tallest.height()) {
                tallest = $(this);
            }
        })
        .height(tallest.height());
    ;
};
</script>

Поиграйте с примером здесь: http://jsfiddle.net/irama/m7Z7a/

РЕДАКТИРОВАТЬ : изменение размера окна браузера иногда может повлиятьвысота столбцов, поэтому вы можете использовать эту версию, которая пересчитывает высоту при изменении размера окна: http://jsfiddle.net/irama/m7Z7a/1/

Дайте нам знать, как вы идете!

1 голос
/ 12 августа 2011

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

Это гарантирует (визуально), что все столбцы имеют одинаковую высоту .

пример:

html : 

<div class="theBackground">
    (your columns here)
</div>

css : 

.theBackground {
    background: url(fakebackground.gif) repeat-x;
}
...