동적 높이 만들기

div '구조체를 만들려고 시도하는 중 배경색을 덮는 데 어려움을 겪고 있습니다. 아래 예제에서 랩 div가 다른 레이어를 덮지 않습니다. 이 나는 CSS에서 실종 뭔가하지만 알아낼 수있는 것은 어떤 도움이 될 문제 :( 무엇 당신은 당신의 수레 취소해야합니다 :)동적 높이 만들기

<style type="text/css"> 
* { 
    margin: 0px; 
    padding: 0px; 
    font-family: Arial; 
} 
html { 
    height: 100%; 
} 
body { 
    background: #688420; 
    height: 100%; 
    font-family: Arial, Verdana, Geneva, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #000; 
} 
#column { 
    position: relative; 
    width: 950px; 
    margin: auto; 
} 
#wrap { 
    background-color:#FF0; 
} 
.wrapleft { 
    background-color: #039; 
    text-align: left; 
    float:left; 
    width:60%; 
} 
.wrapright { 
    background-color:#3F9; 
    text-align:left; 
    float:left; 
    width: 35%; 
} 
.seperator { 
    width:5%; 
    background-color:#9CC; 
    float:left; 
} 
.space { 
    width:100%; 
    height:20px; 
    clear:both; 
} 
#wrapContent { 
    background-color: #C3F; 
} 
</style> 
</head> 

<body> 
<div id="main"> 
    <div id="column"> 
     <div id="wrapContent"> 
      <div id="wrap"> 
       <div class="space">&nbsp;</div> 
       <div class="wrapleft"> 
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris. </p> 
       </div><!-- wrapleft --> 
       <div class="seperator">&nbsp;</div> 
       <div class="wrapright"> 
           <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris. </p> 
       </div> <!-- wrapright --> 
       <div class="space">&nbsp;</div> 
           <div class="wrapleft"> 
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris. </p> 
       </div><!-- wrapleft --> 
       <div class="seperator">&nbsp;</div> 
       <div class="wrapright"> 
           <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris. </p> 
       </div> <!-- wrapright --> 


      </div><!-- wrap --> 

    </div> <!-- column --> 
</div> <!-- main --> 
</body> 
</html>

출처

2012-09-02 cevizmx

큰 :

#wrap { 
    background-color:#FF0; 
    overflow: hidden; 
}

출처

2012-09-02 00:57:34

가 감사를 ! 그것은 효과가 :) 나는 div 클래스의 클래스를 추가하려고 시도 : 둘 다하지만 운동을 잘하지 않았다. 다시 한번 감사드립니다. – cevizmx

당신은 환영합니다 :) –

동적 높이 만들기

답변

관련 문제