san*_*der 17 html css position
<body style="min-height:2000px;">
<div id="test" style="position:relative;bottom:0;">
some dynamically changed content
</div>
</body>
我期待什么: -
如果#test身高大于或等于身体,它应该坚持到底部(因为它现在发生块模型) -
如果#test高度小于身体,它应该坚持到底部,在它上面有白色空间.(这不会发生,#test不会坚持到底).
- 使用位置:绝对是不可接受的,因为#test当#test高于身体时不会影响身高.
- 使用位置:固定是不可接受的,因为那时#test会粘在窗户的底部,而不是身体.
问:我可以使用css获得我期望的结果吗？怎么样？
抱歉英语不好,但我认为这个问题很容易理解.
谢谢.
PS:我在css中需要它,因为一些动态改变的内容是通过js改变的,我想避免#test每次改变时重新计算div位置.
UPD:
我也试过一些display:inline-block; vertical-align:bottom;东西仍然没有结果.
UPD2:
谢谢你们,似乎仍然是,最简单的方法就是在我的javascript中添加几行来重新计算#test身高变化时的身高.
lib*_*olf 12
我知道这是一个老问题,但你可以尝试做:
top: 100%;
transform: translateY(-100%);
变换以元素本身的大小运行,因此它将爬回到最底部的容器.您可以为所有3轴使用字母.
小智 8
由于#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>
#footer{
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE6 */
* html #footer{
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
JSFiddle： http: //jsfiddle.net/As3bP/ - 位置：固定；是执行此操作的明显方法，如果这影响您的布局，请尝试在此处发布您的问题。修改内容的 CSS 比尝试寻找其他方法更容易。
IE6 表达式根本不利于速度，但它可以工作，请在此处阅读：http://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-7-avoid-css-expressions-7202 .html
编辑阅读您的编辑，请忘记上述内容。要卡在正文的底部，可以很容易地将其放置在 HTML 中。这是简单的事情，如果您需要进一步的帮助，请发布示例代码。将某些内容放置在页面底部，默认情况下，放置在页面底部。
JSFiddle： http: //jsfiddle.net/TAQ4d/（如果您确实需要的话）。