jQuery屏幕分辨率高度调整

Question

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

- Brad Birdsall

Answer 1

要在JS中获取屏幕分辨率，请使用screen对象。

screen.height;
screen.width;

基于这些值，您可以计算出适合您的边距。

- RaYell

---

我只是在学习Javascript；你有没有可能向我展示计算高度并添加一定的margin-top的方法？我要调整的div的ID是“port-cont”。 - Brad Birdsall

好的，你已经有了屏幕高度，必须减去一些浏览器菜单、状态栏等。很难说这将是多少，因为它取决于浏览器。然后您应该尝试使用不同的元素大小，直到网站看起来完美无缺。如果我可以建议，我不知道JS是否是您要寻找的。您可以在CSS样式表中设置高度为某个百分比值，这将始终正确设置而无需在JS中读取屏幕分辨率。 - RaYell

有用的教程 -- http://www.w3schools.com/jsref/prop_win_innerheight.asp - Uncle Iroh

Answer 2

以下是使用 jQuery 垂直居中对象的示例：

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

但是您可以轻松地根据自己的需求进行更改。

- Bryan Denny

Answer 3

下面是一个关于如何垂直居中和水平居中div或其他对象的示例：

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

- umutkeskin

Answer 4

请查看jQuery的dimensions插件

- Colin

Answer 5

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

- NaijaBoy