2013-10-18 18 views
0

我有一个网站,我希望每个网站的内容都是死点,无论屏幕高度如何。Javascript //设置页边空白位置为网站高度的负一半

我试图做到的,是这样的:

#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(); 
}); 

有人是能够帮我在这一个? :)

回答

0

试试这个东西,

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

这是你可能需要做

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} 
} 
0
if ($(".page-container").outerHeight()< $(window).outerHeight()){ 
    $(".page-container").css({ 
     'top' : ($(window).outerHeight()-$(".page-container").outerHeight())/2 
    }) 
} else { 
    $(".page-container").css({ 
     'top' : 0 
    }) 
}