css - 如何使用 css 将元素放在屏幕顶部的正上方？

Question

我正在制作一个页面，该页面会以动画形式滑出屏幕。这就是我目前的做法。

var previousOffset = ($(window).height())*-1;
previousOffset = previousOffset+'px'
$('.current').animate({
    top: previousOffset,
}, 500, function(){...}

我在想，有没有更简洁的方法，使用纯 CSS，无需测量屏幕的高度。目前，该元素具有 position:absolute，但这不是必需的。

要清楚目前 .current 的 css 是:

.current{
  top: -"height of screen";
  position: absolute;
}

我想在没有“屏幕高度”的情况下做到这一点。

Answer 1

这可能在很大程度上取决于您的其他标记，但您可以尝试将 .current 元素的高度设置为 100% 并只处理百分比。这将为您隐式处理窗口大小的调整。

请注意，您必须将 html 和 body 元素设置为 100% 才能正常工作。

CSS

html, body {
    margin:0;
    height:100%;
}

.current { 
    position:absolute;
    height:100%;
    width:100%;
}

JS

$('#nextButton').click(function(){
    $('.current').animate({
        top: '-100%'
    }, 500, function(){
       // do something
    }); 
});

演示

http://jsfiddle.net/GoranMottram/BQdtm/