我有一个 div，我希望向下滑动、淡入和向下滑动(与 Twitter Bootstrap 模式非常相似)。
为此，我希望使用固定在可见视口(viewport)上方的位置来定位 div。
问题是，我不知道 div 的(垂直)大小，所以我不能只使用 top: -(height of div)px。
那么，我该如何使用动态高度 div 来做到这一点？
/-------------\
| |
| Dynamic Div |
| |
\-----\-------------/-------/
| |
| VIEWPORT |
| |
/---------------------------\
最佳答案
想法是将您想要滑动的实际元素(我们称之为 twitterbar，我对 twitter 一无所知，但听起来很酷)放入包装器 div 中。
因此，您将带有基本 css 的 twitterbar:position: absolute;margin-top:-100%; 放在带有基本 css 的包装 div 中:position: fixed;。现在您需要将 twitterbar 的 margin-top 属性从 -100% 逐渐设置为 0%。
您可以使用 CSS3 制作动画，这很酷，但在 2013 年初并非所有用户都支持。或者您可以使用 Javascript 制作动画，如果您觉得懒惰:jQuery。不过，这是另一个问题，我不会为您解决。
HTML 示例(里面有一些无用的样式，但我希望它能证明它有效)，您可以手动更改 margin-top 的百分比以表明它有效。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#dynamic
{
position: absolute;
margin-top: -50%;
border: 4px dashed red;
width: 100px;
height: auto;
}
#wrapper
{
position: fixed;
border: 4px dashed blue;
width: 100px;
height: auto;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="dynamic">Dynamic<br />height<br />content</div>
</div>
</body>
</html>
附言。我希望我正确理解了这个问题。
关于html - 将动态高度 div 定位在可见屏幕部分的顶部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14309937/