Html 水平滚动用户界面的内联div，第二个div不在顶部

我有下面的设置，它会产生一个水平滚动的UI，其中包含不同的“页面”。每个页面都是设备/浏览器的全宽。一切似乎都正常，只是

#other

不在屏幕顶部。它看起来更像这样（如果您在两个页面之间的中间滚动）：

使用Chrome的开发工具，我确认了元素的高度是正确的。它实际上在页脚后面，比左div低400像素

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>

---

将

position:relative

添加到

.page

类解决了这个问题

#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%;
}