Boostrap Nav + Carousel + Footer相対的な高さを維持する

Question

ホームhtmlの3つの主要コンポーネントから相対的な高さを保つことが可能かどうかを知りたいと思います。この場合、ブートストラップnav +カルーセル+フッタ。私はカルーセルの高さを変更して、常に画面の約70％になり、ナビゲーション用には20％、フッター用には10％になります。カルーセルには背景色が1つしかなく、イメージではないため、画像のサイズ変更に関する問題はありません。 HTML構造は次のようになります。ここでは

はフィドルは次のとおりです。

<div></div> 
https://jsfiddle.net/q4t8bupc/ 

ありがとう！

Answer 1

これを確認してください。答えを

.header{height:20vh; background:#666} 
 
.content{height:70vh; background:#ed0000;} 
 
.footer{height:10vh; background:#03C;}

<div class="header"></div> 
 
<div class="content"></div> 
 
<div class="footer"></div>