CSS：如何实现两列高度与内容最多的列的高度相匹配？

我已经从我的网站上取得了代码，并简化了它，并放在了jsfiddle中来更好地描述我的问题。CSS：如何实现两列高度与内容最多的列的高度相匹配？

那么我试着做的是有一个边界线从分隔条件右列左栏，但我要线条延伸到最柱的高度内容。现在我已经设置了它的方式，我将左边界放在右侧列内容上，所以如果内容小于左侧列中的内容，它只会拉伸到右侧列的高度。

我怎样才能让它伸展到最长内容的长度？我是否必须使两列等于最长？我如何去做这件事？我的html结构可以吗？谢谢！

2012-01-15 user1143767

要做到这一点，最简单的办法是与边界，它绝对位置添加一个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/

来源

2012-01-15 22:35:20

感谢您指出这个！这真的很有帮助，应该被标记为正确答案:) – panosru 2012-02-13 08:26:51

这个解决方案非常完美！它真的值得我可以给予的单一upvote更多！ – CodeMonkeyKing 2012-04-06 06:13:02

它运行良好，但我遇到了“宽度：209px”的问题，我无法点击左栏中的项目。我改变了它的“宽度：0;左：209px”，它的工作很好。（在Chrome，FF，IE8和IE10中测试） – forumma 2013-11-18 20:17:38