패딩이있는 같은 높이의 열

안녕하세요. 다음 마크 업 있습니다 :패딩이있는 같은 높이의 열

<!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

같은 높이의 열에 대한 것이 겠지만,이 경우 왼쪽 열이 표시되지 않는 이유에 대한 설명입니다. – corroded

해당 링크의 래퍼의 전체 지점은 동일한 높이 열의 가시성을 제공하는 것입니다. 래퍼는 열의 배경을 제공합니다. 유체 컨텐츠가있는 열을 그 트릭없이 CSS에서 동일한 높이로 만들 수는 없습니다. – Strelok