在水平转换布局中独立滚动页面

Question

我正在用水平转换布局构建一个网站（html/css/jquery），下面是一个示例：http://codepen.io/anon/pen/eqBGb。 其实它是一个单独的div移动到指定的ID。

我的问题是，因为它是一个单独的div，所以它始终具有相同的高度，并且即使我只有一个带有大量文本的“页面”（id）也会溢出。

我怎样才能达到这个最终结果http://imakewebthings.com/jquery-waypoints/其中每个页面都有独立的滚动量？

Answer 1

http://codepen.io/anon/pen/cpBfI

您需要强制 “的高度：100％;”在每个元素上（包括.contentbox），所以它将是唯一的元素，内容溢出（因为只有它可以有超过100％的尺寸）。之后，.contentbox需要将溢出设置为自动，因此当它的内容大于具有屏幕尺寸的元素时，它可以拥有自己的滚动条。

编辑： http://codepen.io/anon/pen/tcDGr

你仍然有一个问题与导航栏。在这种设计中不应该固定，因为整个身体根本不动。让它在绝对位置更好。尽管如此，内容还是在它之下。

我的解决方案涉及将.contentbox-wrapper的顶部填充设置为导航栏的大小，并应用合适的box-sizing将它保持在100％的高度。