2009-08-13 19 views
30

Per bilanciare meglio una pagina su cui sto lavorando vorrei trovare un modo per aumentare il margine superiore di un DIV in base alla risoluzione dello schermo. Qual è il modo migliore per impostare queste dimensioni con jQuery o Javascript?jQuery Risoluzione schermo Risoluzione altezza

risposta

71

Per ottenere la risoluzione dello schermo in JS utilizzare screen oggetto

screen.height; 
screen.width; 

Sulla base di che valori è possibile calcolare il margine a tutto ciò che più vi si addice.

+0

sto solo imparando Javascript; Qualche possibilità che tu mi mostri l'approccio che avresti impiegato per calcolare l'altezza e aggiungere un certo margine superiore a questo? L'ID del div che sto regolando è "port-cont". –

+0

Benché si disponga di un'altezza dello schermo, è necessario sottrarre qualcosa per il menu del browser, la barra di stato, ecc. È difficile dire quanto sarebbe perché dipende dal browser. Quindi dovresti sperimentare dimensioni diverse per i tuoi elementi fino a quando il sito non avrà l'aspetto giusto. Se posso suggerire di non sapere se JS è quello che stai cercando. Puoi semplicemente impostare l'altezza nel foglio di stile CSS con un valore percentuale che sarà sempre impostato correttamente senza leggere la risoluzione dello schermo in JS. – RaYell

+1

http://api.jquery.com/height/ – foxybagga

22

Ecco un esempio su come centrare un oggetto in verticale con jQuery:

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

ma si potrebbe facilmente cambiare che per qualunque i vostri bisogni sono.

5

Un altro esempio per div verticale e in orizzontale centrato o qualsiasi altro oggetto (s):

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