Возможность прокрутки без использования фиксированной высоты?

У меня есть страница, которая использует CSS-переходы для перехода от одного раздела к другому. Однако у меня установлена высота 100% и переполнение, так что слайды заполняют экран. Однако это означает, что если контент длиннее страницы, вы не можете ее увидеть.

Я создал JSFiddle, который вы можете увидеть на http://jsfiddle.net/6mesm/

body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #fff;
    background: #333;
    overflow-x: hidden;overflow-y: visible;
}

.pt-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.pt-page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

Каков наилучший способ устранить проблему прокрутки без фиксации высот, чтобы цвета фона по-прежнему заполняли весь экран?