div가 다른 div 내부에서 %로 출력 할 수없는 이유는 무엇입니까?

Question

왜 <divs>은 다른 <divs> 안에있을 때 너비와 높이를 % (퍼센트)로 출력하지 못하는 이유는 무엇입니까?

나는 <div id="2">이고 <div id="3">은 <div id="1">입니다.

<div id="1">의 너비와 높이는 % (백분율)로 설정됩니다.

%로 설정할 때 <div id="2"> 및 <div id="3"> 높이가 작동하지 않습니다. (그들은 비록) 픽셀 (화소와 함께 작동합니다.)

Answer 1

부모

.parent { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 100px; 
 
    background: #eee; 
 
} 
 
#div1 { 
 
    position: relative; 
 
    width: 80%; 
 
    background: #f00; 
 
    height: 80%; 
 
    display: inline-block; 
 
} 
 
#div2 { 
 
    width: 30%; 
 
    background: #0f0; 
 
    height: 30%; 
 
    display: inline-block; 
 
} 
 
#div3 { 
 
    width: 30%; 
 
    background: #00f; 
 
    height: 30%; 
 
    display: inline-block; 
 
}

<div class='parent'> 
 
    <div id="div1"> 
 
    <div id="div2"> 
 
    </div> 
 
    <div id="div3"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

%에 대하여 % 높이와 사업부를 취할 것입니다 그들에게 단지 내부 DIV의의를 div1에 position:relative을 사용하여 상대 단위 예를 들어 div1이 비어 있으면 div1이 100% width and 0% height 인 경우 div2 and div3이 작동하지 않습니다. 예를 들어 px 과 같은 상위 단위를 절대 단위로 설정해야합니다.

HTML, 몸체 너비 및 높이를 100 %로 설정하면 모든 div가 올바르게 작동합니다. 이 코드를 사용해보십시오.

body, html{ 
    height: 100%; 
    background: #eee; 
} 

.div1{ 
    width: 100%; 
    height: 100%; 
    background: #ccc; 
} 

.div2{ 
    width: 50%; 
    height: 50%; 
    background: #888; 
    margin-left: 50%; 
} 

.div3{ 
    width: 50%; 
    height: 50%; 
    background: #fff; 
} 

SEE WORKING EXAMPLE