自動高さ内のパーセンテージの高さ親div？

Question

親の高さが指定されていない（自動）場合、子divを親の高さの120％にするにはどうすればよいですか？

親はそれが動作指定された高さがあります。親の高さが自動（詳細不明）である場合には

#bar { 
 
    background-color:rgba(120,0,0,0.5); 
 
    height:120px; 
 
} 
 

 
#child { 
 
    background-color:rgba(0,120,0,0.5); 
 
    height:120%; 
 
}

<div id="bar"> 
 
    <div id="child"> 
 
    Lorem<br/> 
 
    ipsum<br/> 
 
    dolor<br/> 
 
    sit<br/> 
 
    amet. 
 
    </div> 
 
</div>

を、それは失敗します。

#bar { 
 
    background-color:rgba(120,0,0,0.5); 
 
} 
 

 
#child { 
 
    background-color:rgba(0,120,0,0.5); 
 
    height:120%; 
 
}

<div id="bar"> 
 
    <div id="child"> 
 
    Lorem<br/> 
 
    ipsum<br/> 
 
    dolor<br/> 
 
    sit<br/> 
 
    amet. 
 
    </div> 
 
</div>

を

Answer 1

代わりに子divに:beforeを使用してください。

#bar { 
 
    position: relative; 
 
    display: block; 
 
    background-color:rgba(120,0,0,0.5); 
 
} 
 

 
#bar:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 120%; 
 
    background-color:rgba(0,120,0,0.5); 
 

 
} 
 

 
#child { 
 
    position:relative; 
 
    z-index:10; 
 
}

<div id="bar"> 
 
    <div id="child"> 
 
    Lorem<br/> 
 
    ipsum<br/> 
 
    dolor<br/> 
 
    sit<br/> 
 
    amet. 
 
</div> 
 
</div>

Answer 2

height: auto要素の高さは、子要素の高さによって決まるため、論理的には機能しません。子の高さが親の高さに依存している場合は、循環依存関係になります。この問題のために、自動高さ要素の子は、高さをその要素に依存することはできません。したがって、パーセンテージ単位は無視されます。

あなたは最終的に達成しようとしていることを一歩踏み外し、別のアプローチを考え出す必要があります。