web-dev-qa-db-fra.com

Résolution de l'écran jQuery Réglage de la hauteur

Afin de mieux équilibrer une page sur laquelle je travaille, je voudrais trouver un moyen d'augmenter la marge supérieure d'un DIV en fonction de la résolution de l'écran. Quelle est ma meilleure façon de définir ces dimensions avec jQuery ou Javascript?

30
Brad Birdsall

Pour obtenir la résolution d'écran dans JS, utilisez l'objet screen

screen.height;
screen.width;

Sur la base de ces valeurs, vous pouvez calculer votre marge à tout ce qui vous convient.

72
RaYell

Voici un exemple sur la façon de centrer un objet verticalement avec jQuery:

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

Mais vous pouvez facilement changer cela en fonction de vos besoins.

22
Bryan Denny

Un autre exemple pour div verticalement et horizontalement centré ou tout objet (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 });
5
izmir_LEE

Découvrez le jQuery plugin dimensions

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