如何扩展 ul 或 div 以填充其容器的高度

Question

我正在使用多个 UL（列）在我的页面底部提供并排的列。每个 UL 位于一个 DIV（columnContainer）内。这些 DIV 位于另一个 DIV（架子）内（然后一直是海龟）。

我正在使用 columnContainer DIV 的左边框在每列内容之间创建一条垂直线。因为每个 UL 中的内容高度不同，所以竖线也是。

我希望垂直线的大小都相同。我认为这意味着我需要我的列 UL 扩展它们的高度以匹配最高的 UL，或者我需要 columnContainer DIV 扩展它们的高度以填充它们的父级（这肯定是由最高的子级 UL 控制的高度？）。

内容的数量和列的数量是动态变化的，所以我不能简单地定义最小/最大高度。

可以在以下位置找到我的问题的示例版本：http://pastebin.com/ti5u41Ey

欢迎任何和所有帮助

Answer 1

很遗憾，除非在父容器上指定高度，否则 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/

让我们知道你的进展！

Answer 2

一种非 JavaScript 解决方案正在使用假背景（在这种情况下，包括所有列的垂直线）。

这将保证（视觉上）所有列都具有相同的高度。

示例：

html：

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

css：

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