私は、このHTMLの構造を有する

Question

全体親DIVの高さ使用するDIVを拡張する方法：

<div class="right_col" role="main" style="min-height: 647px;"> 
    <div class="fill"> 
    <div class="page-title"></div> 
    <div class="clearfix"></div> 
    <div class="row"></div> 
    </div> 
</div> 

そしてクラスである "塗りつぶし"：しかし

.fill { 
    min-height: 100%; 
    height: 100%; 
    box-sizing: border-box; 
} 

、 "塗りつぶし" とDIVにクラスはその親に展開されません。最小高さは647pxです。これを解決する方法はありますか？

Answer 1

要素を親の高さにパーセントで塗りつぶすには、親自体の高さを実際に設定する必要があります。

あなたがそれについて考えると意味があります。子どもが成長しているなら、それは親を引き伸ばすが、親と子供が無限に高くなるまで、子はもっと成長し、親を伸ばす必要がある。それはややこしい。

あなたはそれが兄弟が原因だといういくつかのスペースを埋めるために子供を必要とする場合、あなたはまた、いくつかのシナリオでは、余分なスペースを埋めるためにposition: absoluteとleft、right、top、および/またはbottomを使用して試すことができます。

Answer 2

親要素のheight（min-height）がわかっている場合、通常のドキュメントフローの要素の高さのパーセンテージは正常に機能します。親の高さがそれ自身、パーセンテージである状況では、その要素の親の高さを知る必要があります。高さがすべての祖先に明示的に設定されていない場合、これはHTML要素までずっと進むことができます。

html, body { height:100%; } 
 

 
.right_col { 
 
    border: 2px solid blue; 
 
    height: 647px; 
 
} 
 

 
.fill { 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    background-color:yellow; 
 
}

<div class="right_col" role="main"> 
 
    <div class="fill"> 
 
    <div class="page-title"></div> 
 
    <div class="clearfix"></div> 
 
    <div class="row"></div> 
 
    </div> 
 
</div>

Answer 3

あなたはフレックス使用することができます。

.right_col { 
 
    min-height: 647px; 
 
    display: flex; 
 
} 
 

 
.fill { 
 
    flex: 1; 
 
    background: gray;/* see me */ 
 
    box-sizing: border-box; 
 
}

<div class="right_col" role="main"> 
 
    <div class="fill"> 
 
    <div class="page-title">t</div> 
 
    <div class="clearfix">clr</div> 
 
    <div class="row">r</div> 
 
    </div> 
 
</div>

Answer 4

単にあなたのCSSに以下を追加：

.right_col { 
    position: relative; 
} 

それだこと。子divは親divに対して100％を考慮します。