获取高度以在绝对模式下定位div

Question

当我最后一个问题得到立即回答时..我决定发布一个新的XD，该问题将使我的头发全掉。

这就是问题..

我有一个绝对位置div的设计。它有一个透明的png和一个简单的锚点...就像这样。

<div class="buyfloat">
      <img src="img/buy.png" />
</div>

所以..我需要将这个div.buyfloat放置在绝对位置...不要四处移动..不跳不衰..我只需要离页面底部200px的距离即可...因为我只需要它在页脚的顶部..以及页面高度的增加或减少..我不能使用顶部选择器。

好吧..“使用底部！” 您可能会说..是的，我尝试过..但是出于某种原因..底部选择器使用窗口高度（可见部分）而不是整个对象..和..如果我向下滚动页面..图像是在页面中间。

.buyfloat{
    width:333px;
    height:135px;
    position:absolute;
    left:10px;
    bottom:200px; /**   not working         **/
    margin:5px auto 0 auto;
    z-index:99;
}

我正在寻找一些JavaScript（我想我以前看到过），它使我的身高正好在CSS上。但是，如果您有任何不同且更简单的解决方案，那么。

提前致谢。

Answer 1

请记住，“ position：absolute”实际上是相对于具有“ static”以外的位置值的元素的第一个祖先（请参阅http://www.w3.org/TR/CSS2/visudet中的第4点）。 html＃contains-block-details ）。 因此，也许您遇到这种情况，而“底部”是从其他元素（而不是html / body）开始衡量的。

Answer 2

首先，JS在CSS中的唯一工作方式是通过“表达式”（仅IE），其次，这将要求您的用户也打开JS。

pos：abs从常规布局中删除该元素，并将其相对于最近的绝对或相对父元素放置。 如果您使用的是严格的xHTML或过渡的xhtml，那么即使您只是将body设为相对，bottom也绝对可以使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
        body {height: 9000px;position:relative;}
        #a {position:absolute; bottom:0px;}
        </style>
    </head>
    <body>
    <div id="a">bottomDweller</div>
    </body>
</html>

获取高度以在绝对模式下定位div

问题描述

2 个解决方案

解决方案1
3 已采纳 2009-06-02 16:22:16

解决方案2
2 2009-06-02 16:34:11

获取高度以在绝对模式下定位div

问题描述

2 个解决方案

解决方案1 3 已采纳 2009-06-02 16:22:16

解决方案2 2 2009-06-02 16:34:11

解决方案1
3 已采纳 2009-06-02 16:22:16

解决方案2
2 2009-06-02 16:34:11