javascript - Javascript // 将 margin-top 设置为站点高度的负一半

Question

我有一个网站，无论屏幕高度如何，我都希望每个网站的内容都处于死点。

我想要实现的是这样的：

#content {position:absolute; top:50%; height:240px; margin-top:-120px; /* negative half of the height */}

而且我不确定如何编码：

function fullscreenHeight(){      
      var window_height = $(window).height();
      var negative_margin = window_height / 2 * -1;
      $('.pageclass01').css({height:window_height});
      $('.pageclass01').css({margin-top:negative_margin});
}         
fullscreenHeight();           
$(window).bind('resize',function() {      
    fullscreenHeight();
});  

有谁能帮我解决这个问题吗？:)

Answer 1

使用这个 CSS：

#content {
    position:fixed;
    top:0; bottom:0;
    height:240px;
    margin:auto;
}
/* the following is just in case of a too-small screen, such as a small phone */
@media screen and (max-height:240px) {
    #content {position:static}
}

Answer 2

if ($(".page-container").outerHeight()< $(window).outerHeight()){
    $(".page-container").css({
        'top' : ($(window).outerHeight()-$(".page-container").outerHeight())/2
    })
} else {
    $(".page-container").css({
        'top' : 0
    })
}

Answer 3

$('.pageclass01').css({height:window_height,marginTop: "-"+($(this).height()/2)});// this here being the pageclass01 element and not window

这是你可能需要做的

Answer 4

尝试这个，

function fullscreenHeight(){
  var window_height = $(window).height();
  var negative_margin = -(window_height / 2);
  $('.pageclass01').css({'height':window_height,'marginTop':negative_margin+'px'});
}