私は2つの次のようなdivを持って互いに

Question

以下の2つのフルサイズの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%; 
} 

私は、これら2つのdiv要素がお互いを怒鳴るアレンジしたいし、それぞれをそれらは全画面を占有しています（ランディングページを想像してください）。一度に1つのdivだけが画面に表示され、ユーザーはスクロールしてもう一方を見ることができます。

どうすればこの問題を解決できますか？あなたがこれを行うことができる方法で

Answer 1

は、ビューポートの相対単位である：

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

1vhは、ビューポートの高さの1％に等しいです。 1vwはビューポート幅の1％に等しい。 （また、vminは2つのうちの小さい方です）。これは、ほとんどの現代のブラウザーでサポートされていますが、ほとんどのブラウザーでサポートされています。だから、合理的な代替値を提供する場合があります

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

ブロックレベル要素がすでに幅オート（基本的には100％になる）であり、あなたはおそらくないとあなたは、幅を必要としませんそれらがページ内で通常どおりに流れるようにするには、ポジショニングを使用します。