Html 有没有一种CSS3之前的方法可以使div向上平移的量与其高度相同?
我想做的事相当于Html 有没有一种CSS3之前的方法可以使div向上平移的量与其高度相同?,html,css,Html,Css,我想做的事相当于 <style> .bump-up { height: 100px; margin-top: -100px; } </style> <div class="bump-up"> <p>This should translate the div upwards the same amount as it's height. For example, if the div is 100 pixels
<style>
.bump-up {
height: 100px;
margin-top: -100px;
}
</style>
<div class="bump-up">
<p>This should translate the div upwards the same amount as it's height. For example, if the div is 100 pixels in height, then it will be translated 100 pixels higher than it otherwise would've been.
</p>
</div>
.bump up{
高度:100px;
利润上限:-100px;
}
这应该将div向上平移与其高度相同的量。例如,如果div的高度为100像素,那么它将被转换为比其他情况高100像素。
除了足够一般,它在实现中不需要任何精确的像素。如果不使用CSS3的
transform:translateY(-100%)
属性,这可能吗?不只是使用css,但是使用javascript也是可能的
()
HTML
JAVASCRIPT
var moveMe = document.getElementById("moveMe");
var docHeight = document.body.scrollHeight;
var divHeight = moveMe.offsetHeight;
moveMe.style.top = ((docHeight / 2) - (divHeight / 2)) + "px";
请确保将脚本放在DOM之后(或正文标记的末尾),或使用
window.onload=function(){/*script here*/}
将脚本包装起来,而不是这样。是否有您正试图解决的特定问题,或您需要支持的浏览器?
html,body {
margin: 0;
padding: 0;
height: 100%;
}
#moveMe {
position: relative;
}
var moveMe = document.getElementById("moveMe");
var docHeight = document.body.scrollHeight;
var divHeight = moveMe.offsetHeight;
moveMe.style.top = ((docHeight / 2) - (divHeight / 2)) + "px";