根据另一个元素的渲染高度设置元素的底部位置

Set bottom position of element based on rendered height of another element

本文关键字：元素 设置 底部 位置 高度 另一个      更新时间：2023-09-26

以下是我的网址

http://projectilepixels.com/beta/

我需要航天飞机看起来"自然定位"，即在786 x 1024以上的所有分辨率下略低于草地。然而，草的图像，因为它的宽度设置为100%，高度是动态的。因此，航天飞机的底部值也是动态的。我最初尝试使用一个简单的css %值，但没有帮助。

我当前的尝试使用JavaScript。下面是代码

<script>
    $(document).ready(function() {
    var grass = $( '#grass' );
    var grassHeight = grass.outerHeight() - grass.outerHeight()/100 * 74;
        $( '#shuttle_1' ).css("bottom",grassHeight);
    });
</script>

初始脚本只使用

var grassHeight = grass.outerHeight();

但是最后真的搞砸了。

所以，作为临时修复，我添加了计算74%的数学(一个我并不想使用的解决方案，因为它使用神奇的数字)，它似乎在786 x 1024的Mozilla上工作"很好"，但是我在chrome上测试了它在一个稍高的分辨率(现在不记得了，将检查具体的分辨率和编辑这部分很快)。我是JavaScript的新手，我想知道在所有浏览器和分辨率下解决这个问题的最佳实践是什么

如果有人指导我解决这个问题，我将非常感激。我愿意使用css,Javascript以及jquery

我将不同地使用$。位置在这里，

$("#Grass").position({
    of: $(shuttle),
    my: "top center",
    at: "bottom center"
});

，它将定位草的顶线(其中心)，低于羽毛球上底线的中心

为什么不开发一些可以应用于草图像的实际渲染值来调整位置的常量值呢?比如:

让我们假设草的图像是500px x 237px，但草的高度只有158px -如果我们想让穿梭坐在草的顶部，它需要从屏幕底部偏移158px - 158除以237(几乎神奇地)得到。66667

由于这是一个固定的比率，我们可以使用。66667来计算任何大小的草图像与屏幕底部的偏移量，只要我们知道草图像的尺寸，通过乘以高度和。6667

$(function(){
   var OFFSET = .66667; //this value is our shuttle adjustment constant
   $( '#shuttle_1' ).css("bottom",($('#grass').height() * OFFSET)); //sets the bottom offset of the shuttle
   $( '#shuttle_1' ).css("left",(($('#grass').width()/2)-($( '#shuttle_1' ).width()/2))); //centers the shuttle
});

下面是一个示例:

相关文章：