Boostrap Nav + Carousel + Footer保持相对高度

Question

我想知道是否有可能保持家庭HTML的三个主要组成部分的相对高度。在这种情况下，bootstrap nav + carousel + footer。我想修改旋转木马的高度，因此它总是大约70％的屏幕，另外20％用于导航，10％用于页脚。没有图像调整大小问题，因为旋转木马只有一种背景颜色而且它不是图像。 html结构如下所示：

这是小提琴：

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

谢谢！

Answer 1

请检查一下。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;