html – css position:relative;坚持到底

前端之家收集整理的这篇文章主要介绍了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>

猜你在找的HTML相关文章