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

Question

我想让所有这三个div（徽标，幻灯片和子滑块）适合整个屏幕窗口，无论大小。我基本上想模仿背景：在CSS中覆盖动作但是包含所有这三个元素。根据我的研究，我需要在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

使用vh unit in CSS。 100vh恰好是视口高度的100％，所以你可以将你的3个div高度总和达到100vh。