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