css职位：相对;坚持到底

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

What do i expect:
-If #test height is greater or equal to body's it should stick to bottom (as it happens now cuz of block model)
-If #test height is less than body's it should however stick to bottom, having white space above it. (which doesn't happen, #test doesn't stick to bottom).

我期待什么: - 如果#test高度大于或等于身体,它应该坚持到底部(因为它现在发生块模型) - 如果#test高度小于身体,它应该坚持到底部,有白色空间它上面。 (这不会发生,#test不会坚持到底)。

-Using position:absolute is not acceptable as then #test will not influence body height when #test is higher than body.
-Using position:fixed is not acceptable as then #test will stick to bottom of window, not body.

- 使用位置:绝对是不可接受的,因为当#test高于body时,#test不会影响身高。 - 使用位置:固定是不可接受的,因为#test将坚持窗口的底部,而不是身体。

Q: Can I get what I expect using css only? How?

问:我可以使用css获得我期望的结果吗?怎么样?

Sorry for poor English, however I think the question is easy to understand.
Thank you.

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

P.S.: I need that in css because some dynamically changed content is changed via js and I want to avoid recalculating #test div position each time it changes.

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

UPD:

I've also tried some display:inline-block; vertical-align:bottom; stuff still no result.

我也试过一些显示:inline-block;垂直对齐:底部;东西仍然没有结果。

UPD2:

Thank you guys, still it seems, that easiest way is just to add a couple of lines to my javascript to recalculate body height on #test height change.

谢谢你们,似乎仍然是,最简单的方法就是在我的javascript中添加几行来重新计算#test高度变化时的身高。

11 个解决方案

#1

Because of the dynamic height nature of #test you cannot do this with CSS alone. However, if you're already using jQuery, a quick .height() call should be able to get you what you need (#test height needs to be subtracted from positioning it 2000px from the top).

由于#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>

11 个解决方案

#1

更多相关文章

随机推荐