HTML構造

Question

私が正しく、次のモックアップのHTML構造を作成しようとしています：

要件と条件を：

1. アイテムのサイズ（ピンクまたは黒の項目）は、デバイス画面のサイズです。
2. 各項目はページを表します。
3. デスクトップ、タブレット、スマートフォンなどの任意のデバイスを使用できます。
4. 時には1ページのみが表示されます。
5. ナビゲーション、私の質問の対象ではなく、できるだけ多くの情報を提供しようとしています。は、デスクトップデバイスの矢印をクリックして、他のデバイスをスワイプして行います。
6. スクロールバーはありません。
7. ページのコンテンツは画面の現在のサイズを超えている可能性があります。その場合は、コンテンツ内にスライダまたはカルーセル機能でマークされます。
8. いずれのページにも、現在のページのような他の同様の構造を含めることができます。

現在のモックアップの基本的な構造を作成するために知っておくべき点がすべて重要かどうかは分かりません。

メインスターター要素（ピンク）をposition: relativeで作成し、他のすべての要素をposition: absoluteで作成しても問題ありませんか？また、現在の画面サイズに基づいてjQueryで計算されるページのサイズ？またはこれのためにjQueryは必要ありませんか？ （width: 100%とheight: 100%はCSSのみ）

これは私がこのHTML構造を考えている方法ですが、私はそれが最善の解決策であるとは思わないので、他の意見も聞くことをお勧めします。

Answer 1

あなたはアプローチが必要なものに非常に近く、すべてのページdivは相対的にする必要があるコンテナ内にあり、子は絶対的でなければなりません。私が見る限り、単純なマークアップで十分です

HTML

<div id="cont"> 
    <div id="pink"></div> 
    <div id="blk1"></div> 
    <div id="blk2"></div> 
    <div id="blk3"></div> 
    <div id="blk4"></div> 
</div> 

CSS

#cont{ 
    width: 100vw; 
    height:100vh; 
    position: relative; 
} 

#cont div{ 
    width: 100vw; 
    height:100vh; 
    background: #2c2c2c; 
    margin:20px; 
    position:absolute; 
} 

#pink{ background: #F00 !important; } 
#blk1{ left: -100vw; } 
#blk2{ top: -100vh; } 
#blk3{ bottom: -100vh; } 
#blk4{ right: -100vw; } 

以下のようにCSSでこの使用して、ビューポートの高さと幅、

ここにはfiddle