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

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

这是您可能需要做的事情

Answer 3

试试这个，

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

Answer 4

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

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

4 个答案: