2

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

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

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

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

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

任何和所有的帮助最受欢迎

4

2 回答 2

3

不幸的是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/

让我们知道你的进展！

于 2011-08-12T09:59:32.940 回答
1

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

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

例子：

html：

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

CSS：

.theBackground {
    background: url(fakebackground.gif) repeat-x;
}
于 2011-08-12T10:39:18.577 回答