javascript - 无论窗口大小如何，如何让我的 Logo 、幻灯片和图像覆盖整个屏幕

Question

我想让所有这三个 div( Logo 、幻灯片和子 slider )适合整个屏幕窗口，无论大小如何。我基本上想模仿 background:cover 在 CSS 中的 Action ，但同时包含所有这三个元素。根据我的研究，我需要在 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 恰好是视口(viewport)高度的 100%，因此您可以使 3 个 div 的高度总和为 100vh。