在水平轉換佈局中獨立滾動頁面

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％的高度。