2009-08-13 169 views
30

为了更好地平衡我正在处理的页面,我想找到一种方法来根据屏幕分辨率增加DIV的顶部边距。用jQuery或Javascript设置这些尺寸的最佳方式是什么?jQuery屏幕分辨率高度调整

回答

71

要获取JS的屏幕分辨率使用screen对象

screen.height; 
screen.width; 

基础上值就可以计算出你的保证金,以任何适合你。

+0

我只是学习JavaScript;你有什么机会向我展示你将采取的方法来计算高度并添加一定的边距?我正在调整的div的ID是“port-cont”。 – 2009-08-13 15:32:20

+0

那么你有一个给定的屏幕高度,你必须减去浏览器菜单,状态栏等东西。很难说这是多少,因为它取决于浏览器。然后,您应该尝试不同尺寸的元素,直到您的网站看起来恰到好处。如果我可能会建议我不知道JS是否是你正在寻找的东西。您可以在CSS样式表中将高度设置为某个百分比值,该总值将始终设置正确,而无需在JS中读取屏幕分辨率。 – RaYell 2009-08-13 16:12:20

+1

http://api.jquery.com/height/ – foxybagga 2011-09-11 02:41:24

22

下面是关于如何使用jQuery垂直居中对象的示例:

var div= $('#div_SomeDivYouWantToAdjust'); 
div.css("top", ($(window).height() - div.height())/2 + 'px'); 

但是你可以很容易地更改到任何您的需求。

5

用于垂直和水平中心的格或任何(多个)对象又如:

var obj = $("#divID"); 
var halfsc = $(window).height()/2; 
var halfh = $(obj).height()/2; 

var halfscrn = screen.width/2; 
var halfobj =$(obj).width()/2; 

var goRight = halfscrn - halfobj ; 
var goBottom = halfsc - halfh; 

$(obj).css({marginLeft: goRight }).css({marginTop: goBottom }); 
2
var space = $(window).height(); 
var diff = space - HEIGHT; 
var margin = (diff > 0) ? (space - HEIGHT)/2 : 0; 
$('#container').css({'margin-top': margin});