关于绝对位置、100% 高度以及该元素下方的 div 的问题
我有这样的代码：
<div id="container">
<div id="has-100-percent-height">
This div is positioned absolutely and display is none.
Overflow auto, too. There are many of these divs within "container"
</div>
</div>
<div id="the-div-below">
stuff
</div>
当用户单击某个链接时，“100% 高度”div 将向下滑动。发生的情况是它确实向下滑动，但它并没有将下面的 div 向下推。你可以看到内容只显示在“the-div-below”上方，下滑后很快就消失了。
有人知道会发生什么吗？这是在 firefox 4 中。我没有测试过其他浏览器。
感谢您的帮助！
I have code like this:
<div id="container">
<div id="has-100-percent-height">
This div is positioned absolutely and display is none.
Overflow auto, too. There are many of these divs within "container"
</div>
</div>
<div id="the-div-below">
stuff
</div>
When a user clicks a certain link, the "100 percent height" div is to slide down using. What's been happening is that it does slide down, but it doesn't push the div-below down. You can see the content merely display above "the-div-below" and after it slides down, it quickly disappears.
Anyone know what could be going on? This is in firefox 4. I haven't tested other browsers
Thanks for the help!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
HTML 的 CSS 是否已经一成不变？正如其他人所说，绝对定位的元素位于正常流之外，因此不能影响任何其他元素的位置。如果您可以从
#inner中删除position:absolute那么解决方案非常简单（只是正常的浏览器重新流动） - 请参阅 此演示。但是，如果您需要保持绝对定位，则必须手动按下
#below，即 JavaScript - 请参阅 此演示。希望有帮助。
Is the CSS for your HTML already set in stone? As others have said an absolutely positioned element is outside of normal flow therefore cannot affect the position of any other element. If you can remove the
position:absolutefrom the#innerthen the solution is very simple (and just normal browser re-flowing) - see this demo.However if you need to keep the absolute positioning you will have to push
#belowdown manually, i.e. JavaScript - see this demo.Hope it helps.
“the-div-below”没有被下推的原因是绝对定位的东西不会影响页面上其他任何东西的布局。这就是绝对定位的全部意义。
因此，为了让事情按照您想要的方式工作，您需要静态或相对地定位您的“100% 高度”div。
剩下的问题是如何实现您想要的布局，因为大概您使用绝对定位是有原因的？
The reason "the-div-below" is not pushed down is that things that are absolutely positioned don't affect layout of anything else on the page. That's the whole point of absolute positioning.
So to make things work as you want you need to position your "100 percent height" div either statically or relatively.
The remaining question is how to achieve the layout you want, since presumably there's a reason that you were using absolute positioning?
您可以向
#the-div-below添加与 100% 高度元素相等的填充/边距顶部。You could add a padding/margin top to the
#the-div-belowthat is equal with the 100% height element.