L'obtention de la hauteur réelle de l'auto-hautement élément dans IE
Je suis assez confus! avec cette:
...
<div id="main">
<div id="content">
<div class="col1">
...COLUMN1 CONTENT GOES HERE...
</div>
<div class="col2">
...COLUMN2 CONTENT GOES HERE...
</div>
</div><!-- #content -->
</div><!-- #main -->
...
il y a de colonnes comme vous le voyez, et je veux mettre leur élément conteneur hauteur à la taille maximale de deux colonnes(plus 130px). ainsi, en utilisant le Prototype de cadre:
//fixing column height problem
Event.observe(window,"load",function(){
if(parseInt($('col1').getStyle('height')) > parseInt($('col2').getStyle('height')))
$('main').setStyle({'height' : parseInt($('col1').getStyle('height'))+130+'px'});
else
$('main').setStyle({'height' : parseInt($('col2').getStyle('height'))+130+'px'});
});//observe
Il fonctionne bien sous Firefox, Opera, Safari & Chrome, mais il ne parvient pas à renvoyer la hauteur des colonnes. dans IE7+ (pas testé dans IE6), il retourne NaN comme des colonnes de hauteur.
J'ai réussi à trouver que c'est à cause de cela:
.col1,.col2{"height:auto;"}
J'ai aussi utilisé "$('col1').offsetHeight" et elle retourne 0 en tant que la valeur de la hauteur de chaque colonne.
le HTML est de style dans cette façon:
#main{
height: 455px;
background: #484848 url(../images/mainbg.png) repeat-x;
}
#content{
/*height:80%;*/
width: 960px;
direction: rtl;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.col1,.col2{
width: 33%;
text-align: right;
margin-left:3px;
padding-right:3px;
line-height:17px;
}
.col1{padding-top:20px;}
.col1 ul{
margin:0;
padding:0;
list-style: url(../images/listBullet.gif);
}
.col1 ul li{
margin-bottom:20px;
}
.col2{
top: 0;
right: 70%;
position: absolute;
}
une idée sur la question, s'il vous plaît?!
mise à jour/Il y trois jours à résoudre, et j'étais au risque de faire un bounty!
pour la solution, veuillez jeter un oeil à cette question/réponse.
OriginalL'auteur | 2009-03-28
Vous devez vous connecter pour publier un commentaire.
En tant que complément de la réponse de Marc; Il y a une égalité pour jQuery hauteur() à l'état de Prototype:
Et voici les docs: http://prototypejs.org/api/element/getDimensions
Mise à jour: je suis d'accord avec crescentfresh ci-dessous. Depuis que j'ai eu l'absolu même problème dans le passé, j'ai cherché toutes les méthodes possibles pour trouver les propriétés de la dimension mais j'ai échoué. veuillez jeter un oeil à ceci:
Comme vous le voyez, la fonction a été écrit pour obtenir le calculée rendu actuel, de style d'un élément, mais dans notre cas, même cette méthode échoue, je suppose. (vaut la peine d'essayer)
Donc, comme crescentfresh dit, vous devez trouver le problème dans votre CSS de positionnement de la méthode alors ne perdez pas votre temps à la recherche d'une bonne fonction javascript qui pourrait être en mesure de faire de la magie. commençons par supprimer cette #contenu DIV et de laisser le #principal être le seul wrapper de dit colonnes, et puis le style restent à atteindre le but désiré.
merci à vous deux, mais ça ne marche pas!!! de retour 0 comme avant. Je suis extrêmement weired par le biais de ce -_-
toute autre suggestion? 🙁
Je suis absolument confus mais j'apprécie vraiment l'aider. merci beaucoup 🙂
OriginalL'auteur sepehr
Depuis IE veut vous donner un moment difficile, vous pouvez lui donner une attention particulière et d'utiliser une propriété que je crois qu'il va reconnaître...
J'ai vu ce que vous avez mentionné dans la question du corps. Mais vous utilisez la fonction $() à la place de l'indigène getElementById(), et je ne suis pas exactement sûr de ce que cela renvoie.
OriginalL'auteur Josh Stodola
À partir de:
Pourquoi jquery return 0 pour un offsetHeight quand firebug dit que c'est du 34?
Prototype du
getDimensions()
et jQueryheight()
lire laoffsetHeight
ouclientHeight
propriétés, qui vous ai essayé et j'ai obtenu 0. Donc quelque part dans votre code, il doit être quelque chose prendre#col
dehors du rendu de l'écoulement. C'est tout ce que je peux penser.Je vais essayer, merci ^-^
OriginalL'auteur Crescent Fresh
Artarad,
Le style précédent c'est à dire css montre que vous n'avez pas attribué de hauteur.
Veuillez essayer d'ajouter _height:auto dans la classe qui ressemble à
Fondamentalement, de nombreux navigateurs ne reconnaissent la hauteur quand il est attribué à un div ou n'importe quel élément . Dans ce cas, nous utilisons le travail ci-dessus des solutions de rechange.
J'espère que le ci-dessus vous permet de.
Merci,
Samiksha
Le trait de soulignement utilisé avant tout attribut qui signifie qu'il s'applique à la version ie7 navigateur uniquement. Je m'excuse pour cette solution n'est pas aidé vous.. vous permettra de savoir définitivement si je trouve un moyen...
OriginalL'auteur Samiksha
Je ne sais pas si elle va travailler (sans test), mais vous pouvez essayer de jQuery et hauteur(); ce qui (en théorie) donne le calcul de la hauteur. Vaut la peine d'essayer...
OriginalL'auteur Marc Gravell
Je sais que c'est une vieille question, mais j'ai trouvé une meilleure solution que de "Résoudre le css et oublier le javascript".
J'ai eu le exast même problème et utilisé
.innerHeight()
et forcée de jQuery pour calculer la hauteur. Pour une raison quelconque.outerHeight()
n'a pas de travail alors que.innerHeight()
résolu le problème. Vous ne savez pas si il existe une méthode similaire pour le prototype. Vous pourriez chercher dans la bibliothèque jQuery et de comprendre comment.innerHeight()
œuvres, et d'écrire votre propre.OriginalL'auteur UpHelix