ページのサイズ変更時に他のdivのdivをサイズ変更する

Question

私はdivのサイズを変更したいと思っています。

私はあなたが理解できるようにこのjsfiddleを書いています。

Jsfiddle

Jsfiddle whit div.resize in % height

HTML：

<div class="container"> 
<div class="resize"> 
    <div class="red"> 
    </div> 
</div> 
</div> 

はCSS：

.container 
{ 
    width:800px; 
    height:500px; 
} 
html,body{ 
    height:100%; 
    width:100% 
} 
.resize{ 
    height:200px; 
} 

.red{ 
background-color: red; 
height: 50%; 
} 

私は、ページのサイズを変更してもdivのは、「サイズを変更する場合、私は、理由を理解することはできません"divの" red "はサイズ変更されません。

Answer 1

正常に動作しています。エッジを見ることができるようにアウトラインをいくつか追加しました。

.red divは、親の半分の高さです。親を変更すると、.red divの高さが変更されています。

また、と.resizeを固定ピクセル値に設定しているため、ブラウザウィンドウのサイズを変更しても効果はありません。

html,body{ 
 
    height:100%; 
 
    width:100% /* Not needed, this is the default */ 
 
} 
 

 
.container { 
 
    width:600px; 
 
    height:150px; 
 
    outline:1px solid black; 
 
} 
 

 
.resize{ 
 
    height:100px; 
 
    outline:1px solid aqua; 
 
} 
 

 
div.red{ 
 
    background-color: red; 
 
    height: 50%; 
 
}

<div class="container"> 
 
<div class="resize"> 
 
    <div class="red"></div> 
 
</div> 
 
</div>

しかし、あなたが自動サイズ変更を探している場合は、固定値（ピクセル）を使用することはできません、次のような相対値（パーセント、VH、VW、EM）を、使用する必要があります。この：

.container { 
 
    width:600px; 
 
    height:10vh; /* 10% the height of the viewport */ 
 
    outline:1px solid black; 
 
} 
 

 
.resize{ 
 
    height:75%; /* 75% the height of the parent element */ 
 
    outline:1px solid aqua; 
 
} 
 

 
div.red{ 
 
    background-color: red; 
 
    height: 50%; /* 50% the height of the parent */ 
 
}

<div class="container"> 
 
<div class="resize"> 
 
    <div class="red"></div> 
 
</div> 
 
</div>