無論窗口大小如何，如何獲取徽標，幻燈片和圖像以覆蓋整個屏幕

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。