安排如下相互

Question

兩個全尺寸的div我有兩個div類似以下內容：

<div class="div-one"> 
<p>Div 1</p> 
</div> 
<div class="div-two"> 
<p>Div 2</p> 
</div> 

而且在我的CSS：

.div-one{ 
    position: fixed; 
    width: 100%; 
    min-height: 100%; 
} 
.div-two{ 
    position: relative; 
    width: 100%; 
    min-height: 100%; 
} 

我想安排這兩個div婁彼此各一他們佔據全屏（想象着陸頁）。每次只有一個div在屏幕上可見，然後用戶可以滾動查看另一個div。

我該如何做到這一點？

Answer 1

途中，你可以做到這一點是與視口相關單位：

.div-one { 
    min-height: 100vh; 
} 
.div-two { 
    min-height: 100vh; 
} 

1vh等於視口高度的1％。 1vw等於視口寬度的1％。 （vmin是兩個vmax中的較小者。）這些在大多數但不是所有現代瀏覽器中都受支持。所以，你可能想提供一個合理的回退值：

.div-one { 
    min-height: 500px; 
    min-height: 100vh; 
} 
.div-two { 
    min-height: 500px; 
    min-height: 100vh; 
} 

你並不需要的寬度，爲塊級元素已經寬度自動（這將基本上是100％），你可能不如果要在頁面中正常流動，則需要使用定位。