横スクロールUIのインラインdiv、2番目のdivが上にない

Question

次の設定では、異なる「ページ」の横スクロールUIが表示されます。各ページはデバイス/ブラウザの全幅です。 #otherが画面の上部にないことを除いて、すべてが問題なく表示されます。 （あなたは2つのページ間の中間スクロールしている場合）には、より次のようになります。

私は要素の高さが正しいことを確認しているChromeの開発ツールを使用します。実際にはフッターの後ろにあり、左のdivよりも約400ピクセル低い。問題を修正.pageクラスにposition: relativeを追加

HTML

<div id="menu-header"></div> 
<div id="pageContainerContainer"> 
    <div id="pageContainer"> 
     <div id="home" class="page">Stuff here</div> 
     <div id="other" class="page">Other things</div> 
    </div> 
</div> 
<div id="menu-footer"></div> 

CSS

#menu-header, #menu-footer { 
    position: absolute; 
    left:0;right:0; 
    height: 80px; 
    z-index:50; 
} 
#menu-header { top: 0; } 

#menu-footer { bottom: 0; } 

#pageContainerContainer { 
    position: absolute; 
    top: 80px; 
    bottom: 80px; 
    width: 100vw; 
    overflow-x: auto; 
    overflow-y: hidden; 
} 
#pageContainer { 
    height: 100%; 
    width: 200vw; 
    overflow-x: auto; 
    overflow-y: hidden; 
} 

.page { 
    display: inline-block; 
    box-sizing: border-box; 
    width: 100vw; 
    height: 100%; 
} 

Answer 1

。