높이 사용법 : 컨테이너 높이가 정의되지 않은 경우 50 %?

Question

height : 50 %를 사용하고 싶지만 컨테이너 높이가 정의되지 않은 경우 올바른 해결책은 무엇입니까?

<div id="container"> 
    <div id="left-50"> 
     <div id="left-50-1">1</div> 
     <div id="left-50-2">2</div> 
    </div> 
    <div id="image"> 
     <img src="http://automarka.hu/images/stories/Audi%20A8%202.8%20V6%20FSI%202007.jpg"> 
    </div> 
</div> 

#container { 
    overflow:hidden; 
} 

#left-50 { 
    float:left; 
} 

#left-50-1 { 
    height:50%; 
    width:50px; 
    background:yellow; 
} 

#left-50-2 { 
    height:50%; 
    width:50px; 
    background:purple; 
} 

#image { 
    float:left; 
} 

Jsfiddle 홈페이지 : http://jsfiddle.net/XqMDF/

Answer 1

정확한 솔루션은 컨테이너의 높이를 정의한다. 또는 본문 또는 기타 정의 된 요소를 참조하십시오.

컨테이너를 이미지 높이에 맞추거나 고정 된 높이를 정의하십시오.

DEMO: http://jsfiddle.net/XqMDF/2/

Answer 2

포인트는 다음과 같습니다 height: 50%;와 요소 #container에 position: relative; 및 position: absolute;를 추가합니다. 또한 이미지에 display: block;을 적용하십시오. 그런 다음 #image에 왼쪽 여백을 추가하십시오. 이 여백의 값은 height: 50%; (예에서는 50 픽셀) 인 요소의 너비입니다.

다음은 모든 속성이 포함 된 데모입니다.

http://jsfiddle.net/XqMDF/1/