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

发布于 2024-07-23 04:53:39 字数 763 浏览 6 评论 0原文

因为我的最后一个问题立即得到了回答..我决定发布一个新的问题，它把我所有的头发都带走了，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上获得身体高度..但是如果你有任何不同的和更简单的解决方案..我洗耳恭听！

提前致谢。

原文

as my last question was answered inmediatly.. i decided to post a new one which is taking all my hair away, XD

this is the problem..

i have a design with an absolute positioned div.. which has a transparent png and a simple anchor... just like this.

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

so.. i need this div.buyfloat positioned at an absolute position... not moving around.. no jumping no fading.. i just need it at 200px from the very bottom of the page... because i need it just on the top of my footer.. and as the heigh of the pages increases or decreases.. i can´t use top selector.

well.. "use bottom!" you may say.. yes sir i tried.. but for some kind of reason.. the bottom selector uses the window height (visible part) instead the whole thing.. and.. if i scroll the page down.. the image is right in the middle of the page.

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

i'm looking for some javascript (i think i saw one sometime ago) that gives me the body height right on the css.. but if you have any different and easier solution.. i'm all ears!

thanks in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

洋洋洒洒 2024-07-30 04:53:39

请记住，“position:absolute”实际上是相对于位置值不是“static”的元素的第一个祖先（请参阅 http://www.w3.org/TR/CSS2/visudet.html#containing-block-details）。所以也许您遇到这种情况，并且“底部”是从其他元素而不是 html/body 测量的。

回复收藏 0 原文

独夜无伴 2024-07-30 04:53:39

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

pos:abs 从正常布局中删除元素，并将其放置在最近的绝对或相对父元素上。如果您使用严格或过渡的 xhtml，如果您也使正文相对，那么“底部”绝对可以工作：

<!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>

First off, the only way JS works in CSS is via "expression" which is IE only, secondly this would require your users also had JS turned on.

pos:abs removes the element from normal layout and places it with respect to the nearest absolute or relative parent. If you're in strict or transitional xhtml, bottom will absolutely work if you just make the body relative too:

<!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>

回复收藏 0 原文

~没有更多了~