Html ul的块元素自动高度

我有3个UL，它们有不同的高度，我希望它们在右手边有一个边界，到达包含div的底部，这样它们都是相等的。我无法将高度添加到ul，因为容器si将从加载的动态内容更改高度

小提琴：

如果红线一直延伸到div的底部那就太好了

HTML:

---

最简单的方法是将

div

显示为表格，将

ul

s显示为表格单元格：

ul{
    border-right:red solid 3px;
    display:table-cell;
}
li{
    list-style:none;
    padding:10px;
}
div{
    background:grey;
    display: table;
}

也看到

---

它有一个限制：它不适用于IE7。

---

有关详细信息，请参阅。

是否需要将每个ul放在自己的div中，并在div中添加一个右边框？这不起作用，因为每个div都有一个自动调整的高度。孩子的身高为100%是不可行的，因为家长没有指定的身高。

ul{
    float:left;
    border-right:red solid 3px;
}
li{
    list-style:none;
    padding:10px;
}
div{
    background:grey;
    float:left;
}

ul{
    border-right:red solid 3px;
    display:table-cell;
}
li{
    list-style:none;
    padding:10px;
}
div{
    background:grey;
    display: table;
}