Question

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

我使用columnContainer DIV的左边框在每列内容之间创建一条垂直线。由于每个UL中的内容具有不同的高度，因此垂直线也是如此。

我希望垂直线的大小都相同。我认为这意味着我需要我的柱子UL来扩展他们的高度以匹配最高的UL，或者我需要使用columnContainer DIV来扩展他们的高度以填充他们的父母（这肯定是由最高的孩子UL控制的高度？）。 / p>

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

我的问题的示例版本可在以下网址找到：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;
}

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

2 个答案: