html – css position：relative;坚持到底

发布时间：2020-12-14 18:53:53 所属栏目：资源来源：网络整理

导读：body style="min-height:2000px;" div id="test" style="position:relative;bottom:0;" some dynamically changed content /div/body 我期望什么？ – 如果#test的高度大于或等于body的值,那么它应该贴在底部(因为现在发生的是块模型) – 如果#test高度小于b

<body style="min-height:2000px;">
    <div id="test" style="position:relative;bottom:0;">
         some dynamically changed content
    </div>
</body>

我期望什么？
– 如果#test的高度大于或等于body的值,那么它应该贴在底部(因为现在发生的是块模型)
– 如果#test高度小于body,那么它应该贴在底部,在它上方有空格. (这不会发生,#test不粘到底部).

– 使用位置：绝对不可接受,因此#test在#test高于body时不会影响身高.
– 使用位置：固定不可接受,因为#test将粘在窗户的底部,而不是身体.

问：我可以得到我期望使用的CSS吗？怎么样？

对不起英语不好,但是我觉得这个问题很容易理解.谢谢.

P.S .:我需要在css,因为％一些动态变化的内容％通过js改变,我想避免每次更改时重新计算#test div位置.

UPD：

我也尝试过一些“display：inline-block; vertical-align：bottom;”东西还没有结果.

UPD2：

谢谢你们,似乎似乎最简单的方法是添加几行到我的javascript来重新计算#test高度变化的身高.

解决方法

由于#test的动态高度性质,您无法单独使用CSS.但是,如果您已经在使用jQuery,那么一个快速的.height()调用应该可以让你获得所需的东西(#test的高度需要从顶部定位2000px).

<style>
body {
    min-height: 2000px;
}

#test {
    position: relative;
    top: 2000px;
} 
</style>

<script>
var testHeight = $("#test").height();
$( "#test" ).css({
    margin-top: -testHeight;
});
</script>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!