Question

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

问题在于，例如，当第一页的内容大于正文并且滚动条显示它应该时，没有内容的下一页将保留de滚动条和底部不必要的空格。

示例，从第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％！重要; 如果这不起作用，你必须创建一个div并使用绝对和相对来固定高度。

CSS过渡不调整高度

1 个答案: