CSSの子は高さを継承しません。 VHの親の高さ。ブートストラップ3

Question

最初の質問はここにあります。私は周りを見て、グーグルしたが、私は私の問題の解決策を見つけることができません。

私は計算された高さ、100vh - 140pxを占める親（ブートストラップ行）を持っています。これは素晴らしいですが、私はそれが子供の親の割合を占めるようにすることはできません。私は内部に3つのdivを持っています。私はそれが親の身長の100％、他の2つは40％と60％を取ることを望みます。

私は 'height：inherit;うまくいくはずですが、そうではありません。互換性のために、max-heightに必要なパーセンテージを追加しました。

Chrome、Firefox、Safariを試しました。

CSSコード：

// Parent 
#start-page { 
    min-height: calc(100vh - 140px); 
} 
// Children 
#init-square-1 { 
    height: inherit; 
    max-height: 100%; 
} 
#init-square-2 { 
    height: inherit; 
    max-height: 40%; 
} 
#init-square-3 { 
    height: inherit; 
    max-height: 60%; 
} 
HTML: 
    <section id="start-page" class="row"> 
     <div id="init-square-1" class="col-xs-12 col-sm-6"></div> 
     <div id="init-square-2" class="col-xs-12 col-sm-6"></div> 
     <div id="init-square-3" class="col-xs-12 col-sm-6"></div> 
    </section> 

Answer 1

height: inherit;は親要素からではなく、親の構成から、そのような場合でのdivから継承高さという意味ではありません。 div要素のデフォルトの高さは0なので、0が継承されます。

は、私はあなたが設定したいのか、高さわからないんだけど、#start-pageと同じ高さでなければならない場合には、わからない（100％も

height:100%; 

それが必要になる可能性がありますに高さを設定します）外容器に位置与えること：それは結局のところ

#start-page { 
    min-height: calc(100vh - 140px); 
    position:relative; 
} 

Answer 2

相対して、私が行うために必要なすべては親の高さを変更しただけで

height: calc(100vh - 140px); 

へ

の代わり：

min-height: calc(100vh - 140px); 

ので、高さから '分' を削除するとトリックをしました。

ありがとうございました！