他のdivの内部でdivを出力する能力がなくなるのはなぜですか？

Question

なぜ<divs>は、他のものの内部にあるときに幅と高さを％（パーセント）で出力できなくなるのですか？<divs>？

<div id="2">と<div id="3">は<div id="1">です。

<div id="1">の幅と高さは％（パーセント）で設定されています。

％に設定すると、<div id="2">と<div id="3">の高さはどうなりますか？ （彼らはしかしPX（ピクセル）で動作します。）

Answer 1

使用position:relative DIV1それらでの親

.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を取るだけで、内側のdivは相対的単位でありますあなたの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