jquery - CSS Transitions 不调整高度

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

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