2011-03-07 3 views
1

J'ai une page avec deux colonnes et essayer de les faire la même hauteur à l'aide jQuery ... Je le code suivanthauteur jQuery incorrecte

<script type="text/javascript"> 
$(document).ready(function() { 
     var right_column_height = $("#right-column-wrapper").height() 
     var content_height = $("#content-wrapper").height() 
     console.log("content = " + content_height) 

     if(right_column_height > content_height) $("#content-wrapper").css("height", right_column_height) 
     else $("#right-column-wrapper").css("height", content_height) 
}) 
</script> 

si la colonne de droite est plus élevé, son travail correctement, mais quand quand le contenu est plus élevé, il agit bizarrement ... sur une page la hauteur est définie comme prévu, sur l'autre page, il ne fonctionne pas du tout ... J'ai ajouté la consignation de la console pour voir ce qui se passe et je vois que la hauteur du contenu n'est pas calculé en jQuery ... mais quand j'entre alors le même code en console, j'obtiens une valeur corret ... Pouvez-vous suggérer ce qui ne va pas dans mon code s'il vous plait ...

Voir la démo à http://demo.romanpriryl.cz, la page est problématique http://beta.romanprikryl.cz/fotogalerie.htm, mais fonctionne correctement sur http://beta.romanprikryl.cz/objednavky.htm

+0

Essayez d'ajouter 'px' à la valeur:' $ ("# right-column-wrapper"). Css ("height", content_height + "px"); 'sans cela, une autre unité peut être appliquée. En outre, si l'enveloppe de contenu contient des éléments positionnés ou flottants absolus, la hauteur ne sera pas calculée correctement à cause de cela. –

+0

J'ai d'abord utilisé $ ("# right-column-wrapper"). Css ("height") pour obtenir la hauteur et cela donne les valeurs avec 'px', mais le résultat était le même –

Répondre

0

Pourquoi utilisez-vous le javascript pour résoudre un problème qui peut facilement fixe en utilisant le CSS?

Voir par exemple this tutorial et this one as well

+1

J'utilise un fond dégradé et des coins arrondis sur les divs, donc avec les exemples donnés ça aurait l'air bizarre ... ou je ne l'ai pas fait comprendre comment les utiliser correctement dans mon cas ... Si vous le savez, s'il vous plaît suggérer, je ferais mieux d'utiliser le CSS puis JavaScript –

4

J'ai résolu mon problème quand je mets le code de redimensionnement dans la fonction setTimeout ... un délai de 1 milliseconde est suffisant, mais je ne comprends pas pourquoi il est ne fonctionne pas sans cela ... probablement la hauteur de la page est en quelque sorte calculée après que le document est prêt

+0

Bizarre en effet. Merci pour le partage si! –

0

Si les éléments # wrapper-colonne-droit ou # content-wrapper ont des images sans dimensions spécifiées, alors jQuery retournera la hauteur du conteneur moins cette hauteur d'image. Cela arrive parce que les images n'ont pas encore été chargées sur $ (document) .ready() (c'est aussi la raison la plus probable pour laquelle setTimeout fonctionne). Pour corriger cela, placez le code où vous voulez obtenir les hauteurs d'éléments dans $ (window) .load().

par exemple. Vous pouvez également définir la largeur et la hauteur de l'image en HTML et jQuery déterminera les valeurs de hauteur correctes pour vos éléments.

Questions connexes