位置混合：绝对和固定答案

【问题标题】：Mixture of position:absolute and fixed位置混合：绝对和固定
【发布时间】：2009-10-17 18:45:46
【问题描述】：

任何人都可以想出一种非 Javascript 的方式来执行以下操作：

屏幕某处有一个 DIV 元素。它的位置无法预测。
它具有固定的宽度，并且应该与文档中的所有其他内容重叠，即。它的“位置”设置为“绝对”。
这是关键：我希望将 DIV 的底部边缘粘到视口的底部。我尝试给元素“底部：0px”，但在没有“高度”设置的情况下，整个 DIV 向下移动到底角，这不是我想要的。我希望它从文档中的随机位置拉伸到视口的底部边缘。

如果不使用 JavaScript，我看不到解决方案，但也许有人有一个绝妙的主意。

【问题讨论】：

【解决方案1】：

我认为以下内容不兼容 IE6，但适用于所有其他浏览器。对于底部，您还应该给它一个顶部。一旦你设置了高度，它将优先（我给了它一个边框，所以你可以看到它拉伸）：

<div style="position:absolute;top:150px;bottom:10px;width:100px;border:1px solid red;">
    I'm stretched to the  bottom
</div>

【讨论】：

谢谢Abel，但我要找的更棘手：我想使用元素的隐式开始位置，即我不想给它一个“顶部”属性，而是从浏览器的确切位置开始放吧。只是 div 的底部边缘应该表现得像一个“固定”元素，并且始终粘在屏幕底部。当我滚动文档时，DIV 应该相应地拉伸和收缩。我开始认为这只能用 JavaScript 来完成。
确实，这是你应该用 JavaScript 做的事情。我尝试了expression(..)（它基本上是 CSS 中的 JavaScript，而且它是 uuuugly），但这也没有给我太多。顺便说一句，底部/顶部错误仍然存在于 IE7 中，仅在 IE8 中解决，但这在这里无济于事：您想混合使用固定和绝对。
好吧，这肯定需要一些 Javascript。但不是今天，我没心情 :) 不过，感谢您的努力。

【解决方案2】：

试试这个

也尝试检查 position:relative;位置：静态；位置：固定；

谢谢 freeweb.pk

【讨论】：