CSS转换不调整高度

Question

我正在使用"页面转换集合"(http://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/)jQuery脚本，用于在页面之间切换时使用事务（向下>向上，向左>向右，…）。

问题是，例如，当第一个页面的内容比正文大，并且滚动条看起来像应该的那样时，没有内容的下一个页面将在底部保留取消滚动条和不必要的空白。

例如，从第1页转到第2页。在第2页的底部，第1页留下了很多空白：http://netbear.be/transition/

有没有可能在每次页面转换后，都会以某种方式重新计算高度？

// HTML-structure
<div class="pt-wrapper">
    <div class="pt-page pt-page-1">
        // content bigger than browser height creating a scrollbar (overlay: visible;)
        <div style="background: red; width: 150px; height: 2000px;"></div>
    </div>
    <div class="pt-page pt-page-2">
        // content smaller than browser height.
    </div>
</div>
// CSS
.pt-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    perspective: 1200px;
}
.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;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

Answer 1

您可以使用！对高度属性很重要例如：高度：100%！重要的如果这不起作用，您必须创建一个div，并使用absolute和relative来固定高度。