帶填料的等高柱

嘿。我有以下標記：帶填料的等高柱

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
* 
{ 
    padding: 0; 
    margin: 0; 
} 

#container 
{ 
    padding-left: 200px; 
    padding-right: 10px; 
    overflow: hidden; 
} 

.column 
{ 
    float: left; 
    position: relative; 
    text-align: justify; 
    margin-bottom: -2000px; 
    padding-bottom: 2005px; 
} 

#top 
{ 
    background-color: Red; 
    height: 30px; 
} 

#content 
{ 
    background-color: Green; 
    width: 100%; 
    padding: 0 5px; 
} 

#left 
{ 
    background-color: Blue; 
    width: 200px; 
    right: 210px; 
    margin-top: -30px; 
    margin-left: -100%; 
} 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <div id="top"> 
      Lorem ipsum blah blah blah 
     </div> 
     <div id="content" class="column"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio eros, porta eu rutrum sed, vestibulum nec nisl. Nulla facilisi. Nunc viverra, ante eget lobortis fermentum, mauris est rhoncus nisl, nec ullamcorper risus ligula a sem. Donec a lorem sit amet nunc pharetra rhoncus. Aenean rutrum tincidunt dui nec dapibus. Nullam posuere semper quam, sed eleifend enim pulvinar a. Praesent mattis dui id nisl placerat dignissim. Mauris hendrerit ultricies justo, laoreet luctus turpis consequat ac. Suspendisse potenti. Ut in ipsum ligula. Phasellus sagittis metus ac libero varius vel pulvinar tortor scelerisque. Donec cursus augue ut arcu porta viverra. Quisque tempus aliquam erat sed viverra. Suspendisse sem odio, ornare sit amet sodales id, vulputate non erat. Aenean viverra tempus turpis commodo dictum. Nulla eleifend risus egestas justo vestibulum in volutpat orci lacinia. Proin sapien neque, lobortis eget cursus quis, venenatis vitae nisl. Suspendisse at neque eu mauris lobortis eleifend. Etiam suscipit sapien nec orci tincidunt at hendrerit nisl tempus. 
     </div> 
     <div id="left" class="column"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio eros, porta eu rutrum sed, vestibulum nec nisl. Nulla facilisi. Nunc viverra, ante eget lobortis fermentum, mauris est rhoncus nisl, nec ullamcorper risus ligula a sem. Donec a lorem sit amet nunc pharetra rhoncus. Aenean rutrum tincidunt dui nec dapibus. Nullam posuere semper quam, sed eleifend enim pulvinar a. Praesent mattis dui id nisl placerat dignissim. Mauris hendrerit ultricies justo, laoreet luctus turpis consequat ac. Suspendisse potenti. Ut in ipsum ligula. Phasellus sagittis metus ac libero varius vel pulvinar tortor scelerisque. Donec cursus augue ut arcu porta viverra. Quisque tempus aliquam erat sed viverra. Suspendisse sem odio, ornare sit amet sodales id, vulputate non erat. Aenean viverra tempus turpis commodo dictum. Nulla eleifend risus egestas justo vestibulum in volutpat orci lacinia. Proin sapien neque, lobortis eget cursus quis, venenatis vitae nisl. Suspendisse at neque eu mauris lobortis eleifend. Etiam suscipit sapien nec orci tincidunt at hendrerit nisl tempus. 
     </div> 
    </div> 
</body> 
</html>

問題是，左欄不顯示。但是，如果我從#content中刪除填充（並且從＃左側的右側值中減去10），它將起作用，除了#content上缺少的填充。有沒有辦法解決這個問題，而沒有任何額外的標記？我已經看到了這個解決方案：

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

但我想包裝的量保持在最低限度... :)

來源

2010-08-17 ManiSto

剩餘邊距的用途是什麼：-100％;？ – buckbova 2010-08-17 06:49:49

對於等高欄應該是這樣的，儘管在這種情況下，它是導致左列不顯示的原因 – corroded 2010-08-17 06:57:51

該鏈接中包裝的整個觀點是爲了給出等高欄的可見性。包裝爲您的列提供背景。無法使用CSS中的流體內容高度相同的柱子而沒有這個技巧。 – Strelok 2010-08-17 07:09:42