對孩子的負面翻譯，如何相應調整父高？

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;
}

希望我明白你的問題，並幫助我。