2010-04-27 5 views
4

Im la recherche d'une certaine manière, en javascript, pour calculer la taille du navigateur (px) alors calculer la taille d'un <div> enlever 50px de cette taille plein écran:calcul de la hauteur Javascript/jQuery

Par ex

Browser screen size: 800px (Height) 
Existing <div> that is always 50px (Height) 
Leaves 750px (Height) for the remaining <div> to fill the page. 

Ensuite, prenez que 750px et l'appliquer comme style en ligne:

<div style="height: 50px"> 
<img src="banner.png" /> 
</div> 

<div style="height: x"> 
This fills the remainder of the page 
</div> 
+0

Si vous souhaitez vérifier d'autres propriétés ('marge',' padding' et 'border') qui peuvent contribuer à la hauteur d'une DIV, utilisez' outerHeight' - http://api.jquery.com/outerHeight/ –

Répondre

5

Je suppose que vous voulez dire la hauteur du document, et non la hauteur du navigateur. Vous pouvez le faire en utilisant quelque chose comme ce qui suit:

$("#div2").height($(document).height() - 50); 

// or for more dynamicity 
$("#div2").height($(document).height() - $("#div1").height());  

Si vous avez la hauteur moyenne du navigateur et non documenter la hauteur, remplacer $(document) avec $(window).

+0

Can vous ajoutez un autre élément à soustraire: $ ("# div2"). height ($ (document) .height() - $ ("# div1") - $ ("# div3"). height()); – CLiown

+0

@danit: si vous voulez, bien sûr. Ajoutez autant d'éléments que vous le souhaitez. Assurez-vous que vous appelez la méthode 'height()' sur eux, par exemple. '$ (" # div2 "). hauteur ($ (document) .height() - $ (" # div1 "). hauteur() - $ (" # div3 "). hauteur());' –

+0

Merci, une autre question. Possible de redimensionner # div2 lorsque le document est redimensionné? Essayé .resize mais c'est pour la fenêtre pas le document. – CLiown

Questions connexes