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

Question

以下是我网站的url

http://projectilepixels.com/beta/

我需要航天飞机显示为“自然定位”，即在 786 x 1024 以上的所有分辨率下略低于草地。但是，由于草 map 像的宽度设置为 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% 的数学方法(我真的不想使用这个解决方案，因为它使用了魔数(Magic Number))，它似乎在 Mozilla 上以 786 x 1024 工作“很好”，但是我在 chrome 上以稍高的分辨率测试了它(现在不记得了，将检查具体的分辨率并尽快编辑这部分)。我是 JavaScript 的新手，正在了解在所有浏览器和分辨率下解决此问题的最佳做法是什么

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

Answer 1

我会在这里 deffently 使用 $.position，

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

这将定位草的草顶线(它的中心)，在梭底线中心的下方