對孩子有負面影響，如何調整父母身高？

我有一個網站頭部，我第一次使用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，因爲我有一個滑動動畫，並且在Safari上使用margin-top會很慢（因爲會不斷重繪所有內容）。這就是爲什麼我必須使用translate而不是保證金。

來源

2015-09-25 Bart Burg

這變得非常接近，但它並不完美：http://jsfiddle.net/1shxwmv8/5/ –

雖然它是一種黑客和不適用於項目 –

這是什麼目的？我需要知道，所以我知道什麼是合適的解決方案 - 例如，你能夠顯示沒有或可見性：隱藏「翻譯」的元素（因爲它已被隱藏） - 那麼你只需要可見元素的高度 - 如果你能給我更多的信息，我正在爲你做一個小提琴。 – rockmandew

如果得到的頭部的高度是固定的，那麼你可以只添加一個高度值.content.scrolled像這樣：

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

.content.scrolled { 
    height: 300px; 
}

希望我理解你的問題，並幫助。

來源

2015-09-25 17:33:59

我可以做到這一點，但我不知道內容的高度。星期一上午我會添加一些截圖來澄清這個問題。 :) –

對孩子有負面影響，如何調整父母身高？

回答

相關問題