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

  1. 5

    En tant que complément de la réponse de Marc; Il y a une égalité pour jQuery hauteur() à l'état de Prototype:

    $('col1').getDimensions().height //or .width ofcourse

    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: 

    function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

    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é.

    Ressemble à un gagnant ;-p
    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

  2. 2

    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...

    var height;
if(document.all) { //This means it is IE
  height = document.getElementById('col1').offsetHeight;
}
else {
  height = //Use what is working in other browsers now
}
    Salut Josh, le offsetHeight() ne fonctionne pas et je l'ai mentionné que, dans la question du corps, merci 😉
    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

  3. 1

    À partir de:
    Pourquoi jquery return 0 pour un offsetHeight quand firebug dit que c'est du 34?

    Un élément qui n'est pas réellement prenant
    partie dans le document rendu processus
    n'a pas de dimensions, et de donner une
    offsetWidth/Hauteur de 0.

    Prototype du getDimensions() et jQuery height() lire la offsetHeight ou clientHeight 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.

    suivi: .gd/versez
    Je vais essayer, merci ^-^

    OriginalL'auteur Crescent Fresh

  4. 0

    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 à

        .col1,.col2{
width: 33%;
_height:auto;
height:auto;
text-align: right;
margin-left:3px;
padding-right:3px;
line-height:17px;
}

    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

    merci beaucoup Samiksha, mais Il ne fonctionne pas pour moi. En outre, j'ai enlevé l'80% de la hauteur de la règle et c'est de garder défaut 🙁 en fait, ce que ce caractère de soulignement doit être en mesure de le faire?
    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

  5. 0

    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...

    merci Marc, mais je suis en utilisant le prototype et je pense que ce ne sera pas agréable à utiliser à la fois des 'em sur une seule page, n'est-ce pas?

    OriginalL'auteur Marc Gravell

  6. 0

    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