2009-08-13 168 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});