html - 是否有一种 pre-CSS3 方法可以使 div 向上翻译与其高度相同的量？

Question

我想做的相当于

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

除了足够通用，它在实现中不需要任何精确的像素。如果不使用 CSS3 的 transform:translateY(-100%) 属性，这是否可能？

Answer 1

不只使用 css，但是使用 javascript 是可能的。

( Demo )

HTML

<div id="moveMe">Hello World!</div>

CSS

html,body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#moveMe {
    position: relative;
}

JavaScript

var moveMe = document.getElementById("moveMe");
var docHeight = document.body.scrollHeight;
var divHeight = moveMe.offsetHeight;
moveMe.style.top = ((docHeight / 2) - (divHeight / 2)) + "px";

确保将脚本放在 DOM 之后(或 body 标记的末尾)或使用 window.onload = function() {/* script here */}