CSS过渡不调整高度

Question

我正在使用 'A Collection of Page Transitions' (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

你可以使用 !important 作为高度属性 例如：高度：100%！重要； 如果这不起作用，您必须创建一个 div 并使用绝对和相对来固定高度。