无论窗口大小如何，如何获取徽标，幻灯片和图像以覆盖整个屏幕

Question

我想让所有这三个div（徽标，幻灯片和subslider）都适合整个屏幕窗口，而不管大小如何。 我基本上想模仿CSS中的background：cover动作，但要包含所有这三个要素。 从我的研究中，我需要使用javascript做一些事情，但是无论我如何尝试，我似乎都无法使其正常工作。 我还想指出的是，如果这发生了任何变化，我将使用drupal ...尽管阅读了很多有关该主题的内容，但是在尝试了解窗口大小调整问题，任何帮助和建议时，我还是走出了我的舒适区，代码片段将是天赐之物！

<div class="logo">
<img src="sites/all/themes/cpd pro/images/cpd.jpg" alt="Center for Passion Development">
</div>
<!-- *************SLIDESHOW***************-- -->
<div id="slider">
<img src="sites/all/themes/cpd pro/images/slide1.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide2.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide3.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide4.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide5.jpg"/>
</div>  
<!-- *************BELOW SLIDESHOW IMAGE***************-- -->
<div class="subslider">
<h5><img src="sites/all/themes/cpd pro/images/nav-wrap.png" alt="navigation">  </h5>
</div>

Answer 1

在CSS中使用vh单位 。 100vh恰好是视口高度的100％，因此您可以使3 div的高度总和为100vh。