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

Question

我从我的网站上提取了代码，并对其进行了简化，并在jsfiddle上对我的问题进行了更好的描述。

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

---

所以我想做的是用一条边界线来分隔左栏和右栏，但我希望这条线能延伸到最有内容的栏的高度。按照我现在的设置方式，我在右列内容上向左放置边框，所以如果内容比左列中的内容小，它只会延伸到右列的高度。

如何使其延伸到最长内容的长度？我是否必须使两列都等于最长列？我该怎么做？我的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/

Answer 2

希望这些链接能对您有所帮助！

http://positioniseverything.net/articles/onetruelayout/equalheight

如何在HTML中具有相同高度的两列？

设置div'；使用CSS 的HTML中的s高度

祝你好运！

Answer 3

实现目标没有简单的方法。

当你阅读这篇文章时，你将学习4种可能的方法，然后你可以决定什么是你的项目的最佳方法。