Question

我有这样的代码：

<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％height”div将使用向下滑动。发生了什么事情，它确实滑落了，但它没有推动下面的div。您可以看到内容仅显示在“the-div-below”上方，在它向下滑动后，它会很快消失。

任何人都知道会发生什么事吗？这是在Firefox 4.我没有测试过其他浏览器

感谢您的帮助！

Answer 1

您的HTML的CSS是否已经一成不变？正如其他人所说，绝对定位元素在正常流量之外，因此不会影响任何其他元素的位置。如果您可以从position:absolute删除#inner，那么解决方案非常简单（只需普通浏览器重新流动） - 请参阅this demo。

但是，如果您需要保持绝对定位，则必须手动向下推#below，即JavaScript - 请参阅this demo。

希望它有所帮助。

Answer 2

“-div-below”未被推倒的原因是绝对定位的东西不会影响页面上任何其他内容的布局。这就是绝对定位的重点。

因此，为了让事情按照您的意愿运作，您需要静态或相对地定位“100％高度”div。

剩下的问题是如何实现你想要的布局，因为大概是你使用绝对定位的原因？

Answer 3

您可以在#the-div-below上添加填充/边距顶部，该顶部与100％height元素相同。

关于位置绝对值，100％高度以及该元素下方的div的问题

3 个答案: