使用纯html / css在固定页眉和页脚之间的垂直图像滑块的自动高度 - 是否可以？

Question

抱歉，但我只用一句话就无法解释。所以，这是这笔交易。我建立了一个只有html / css的小网站。它的主页面包含固定页眉，固定页脚和它们之间的主容器。主要容器有五个div。我希望主容器中每个div的高度与页眉和页脚之间的距离完全相等，无论是否有人在笔记本电脑或智能手机上打开此站点。这是一般的想法它看起来如何

   <header>
  <ul>
    <li>navbar</li>
    <li>navbar</li>
    <li>navbar</li>
</header>
<main>
  <div class="hero"><p>Picture1</p></div>
  <div class="hero"><p>Picture2</p></div>  
  <div class="hero"><p>Picture3</p></div>  
  <div class="hero"><p>Picture4</p></div>  
  <div class="hero"><p>Picture5</p></div>    
</main>
<footer>
  <ul>
    <li>footer</li>
    <li>footer</li>
    <li>footer</li>
</footer>

http://codepen.io/SavageRandy/pen/BQWvyZ

目前，我针对不同的视口大小进行了几百次媒体查询，但这很乏味，效率低下，我必须承认，这很愚蠢。对于大屏幕，我使用vh属性，但它没有多大，因为视口的高度和页眉和页脚之间的不一致以不同的速度变化。 所以，我的问题是，只有html / css才能设置主容器中每个div的高度与不同视口的页眉和页脚之间的距离完全相等吗？

P.S。请不要因为我的英语不好而受到侮辱，我会上课。