微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

html – css position:relative;坚持到底

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

原文地址:https://www.jb51.cc/html/224817.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐