html - CSS:如何实现与内容最多的列高度相匹配的两个列高？

Question

我从我的站点获取代码并对其进行了简化，并将其放入 jsfiddle 中以更好地描述我的问题。

http://jsfiddle.net/5vMHC/3/

---

所以我想做的是用一条边框线将左列与右列分开，但是我希望该线延伸到内容最多的列的高度。我现在设置的方式是，我将 border-left 放在右栏内容上，因此如果内容小于左栏中的内容，它只会延伸到右栏的高度。

如何让它拉伸(stretch)到最长内容的长度？我必须让两列都等于最长的吗？我该怎么做呢？我的html结构可以吗？谢谢!

Answer 1

最简单的方法是添加一个带边框的 filler 类型元素并绝对定位:

CSS

.filler {
    border-right:1px solid #CDE;
    width: 209px;                   /* width of #sub_page_left_column */
    position: absolute;
    bottom: 0;
    top: 0;
}

/* add position relative so filler is positioned in respect to this div */
#content {
    ....
    position: relative;           
    ....
}

HTML

<div id="content">
    <!-- add the new filler element -->
    <div class="filler"></div>  
    <div id="sub_page_left_column">...</div>
    <div id="sub_page_right_column">...</div>
</div>        

右边更长:http://jsfiddle.net/5vMHC/5/

左边更长:http://jsfiddle.net/5vMHC/6/