对孩子的负面翻译，如何相应调整父高？

Question

我有一个带有标题的网站，我使用translateY（-590px）在第一次滚动时向上滑动。 我得到的问题是，在我的页面底部，我在某些浏览器上获得了额外的空白区域。

这个小提琴中的问题演示

这是示例代码：

HTML

<div class="content">
    <div>block 1</div>
    <div>block 2</div>
    <div>block 3</div>
    <div>block 4</div>
</div>

CSS

.content{
    background-color: grey;
}
.content div{
    height: 100px;
    color: white;
    background-color: #2f2f2f;
    transition: transform 0.6s ease;
}
.content.scrolled div:last-child{
    height: 100px; 
    transform: translateY(-100%);
}

JS（jQuery）

$(function(){
    setTimeout(function(){
        $(".content").addClass("scrolled");
    }, 700);
});

我怎样才能使父母自动调整其高度。

ps我使用translateY，因为我在滑动时有动画，使用margin-top在Safari上会很慢（因为不断重绘所有内容）。 这就是为什么我必须使用translate而不是margin。

Answer 1

如果生成的标题的高度是固定的，那么您只需将高度值添加到.content.scrolled，如下所示：

http://jsfiddle.net/1shxwmv8/8/

.content.scrolled {
    height: 300px;
}

希望我明白你的问题，并帮助我。