对孩子有负面影响，如何调整父母身高？

我有一个网站头部，我第一次使用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

我可以做到这一点，但我不知道内容的高度。星期一上午我会添加一些截图来澄清这个问题。 :) –

对孩子有负面影响，如何调整父母身高？

回答

相关问题