HTML DIV hauteur dans IE

Voici un petit morceau de HTML.HTML DIV hauteur dans IE

<html> 
<body> 
    <div id="containerDiv" style="background-color:red; height: 200px"> 
     <div id="topDiv" style="background-color:green"> 
      <input type="button">1</input> 
     <div> 
     <div id="textAreaDiv" style="background-color:blue;width:100%; height:100%;"> 
      <textarea style="width:100%; height:100%;">123</textarea> 
     </div> 
     <div id="bottomDiv" style="background-color:purple"> 
      <input type="radio" name="Milk" value="Milk">Milk</input> 
      <input type="radio" name="Butter" value="Butter">Butter</input> 
     </div> 
    </div> 
</body> 
</html>

Ce que je suis en train de le faire pour faire textAreaDiv.height être containerDiv.height - (topDiv.height + bottomDiv.height). Cela fonctionne parfaitement dans Chrome, mais pas dans IE9. Dans IE9, la hauteur du textarea est environ la hauteur de deux caractères. Une idée de comment faire fonctionner cela dans IE9 comme dans Chrome?

est ici un plafond d'écran de ce que je reçois: http://postimage.org/image/bfn6bsalv/

MISE À JOUR Voici une solution avec javascript, mais je voudrais tout de même une solution purement CSS

<html> 
<head> 
    <script type="text/javascript" src="JQuery-1.7.2.min.js"></script> 
</head> 
<body> 
    <script> 
     $(document).ready(function() {   
      var textHeight = $('#containerDiv').height() - ($('#topDiv').height() + $('#bottomDiv').height());   
      $('#textBox').height(textHeight); 
     }); 
    </script> 
    <div id="containerDiv" style="background-color:red; height: 400px"> 
     <div id="topDiv" style="background-color:green;height:25px;"> 
      <input type="button">1</input> 
     </div> 
     <div id="textAreaDiv" style="background-color:blue;width:100%;">    
      <textarea id="textBox" style="width:100%;">123</textarea>   
     </div> 
     <div id="bottomDiv" style="background-color:purple;height:25px;"> 
      <input type="radio" name="Milk" value="Milk">Milk</input> 
      <input type="radio" name="Butter" value="Butter">Butter</input> 
     </div> 
    </div> 
</body> 
</html>

Source

2013-01-17 BlueChameleon

Peut-être juste donner à toutes les DIVs intérieures une hauteur spécifique chacune qui s'ajoute aux 200px de la DIV containg? Ensuite, donnez à la zone de texte la même hauteur que la variable parente (en tenant compte du remplissage et des bordures.) Vous utiliserez également un fichier de réinitialisation css pour vous débarrasser de toutes les marges/bourrages avant de commencer –

html généré pour le contrôle asp.net personnalisé Donc, l'utilisateur va définir la hauteur et la largeur de containerDiv et tous les autres divs devraient redimensionner en conséquence – BlueChameleon

Je sais que vous avez dit que Chrome le rend correctement, mais je ne vois pas ce que vous décrivez. [Pour moi] (http://jsfiddle.net/4H4bL/), la seule différence entre Chrome et IE9 est que la «textarea» de Chrome est plus courte de quelques pixels. Corrigez-moi si je me trompe, je pense que vous êtes essayer d'accomplir est [this] (http://jsfiddle.net/4H4bL/1/), mais sans définir la hauteur exacte des pixels – MiniRagnarok

I » Je suis content que vous ayez trouvé quelque chose qui marchait. Je voulais vous faire savoir que je vois pourquoi ça n'a pas marché. Votre code n'est pas valide La balise de fermeture pour topdiv manque la barre oblique.

Source

2013-01-17 16:25:09 MiniRagnarok

HTML DIV hauteur dans IE

Répondre

Questions connexes