Div 100% de la hauteur fonctionne sur Firefox mais pas sous IE. Que faire?

Question

J'ai un div conteneur qui contient deux divs, et tous deux doivent prendre 100% de la largeur et de 100% de la hauteur à l'intérieur du conteneur.

J'ai mis à la fois interne divs à 100% de la hauteur. Qui fonctionne très bien dans Firefox, cependant, dans IE les divs ne pas étirer à 100% de la hauteur, mais seule la hauteur du texte à l'intérieur d'eux.

Ce qui suit est une version simplifiée de ma feuille de style.

#container
{
   height: auto;
   width: 100%;
}

#container #mainContentsWrapper
{
   float: left;

   height: 100%;
   width: 70%;
   margin: 0;
   padding: 0;
}


#container #sidebarWrapper
{      
   float: right;

   height: 100%;
   width: 29.7%;
   margin: 0;
   padding: 0;
}

Est-il quelque chose que je fais mal? Ou tout Firefox/IE bizarreries, je suis absent?

Answer 1

Son dur pour vous donner une bonne réponse, sans voir le code html que vous utilisez réellement.

Êtes-vous à la sortie d'un doctype / à l'aide de normes mode de rendu? Sans pour autant être capable de regarder dans un format html repro, ce serait ma première suppose que pour une interprétation html différence entre firefox et internet explorer.

Answer 2

Je ne suis pas sûr quel est le problème à résoudre, mais quand j'ai deux côte à côte des conteneurs qui doivent être à la même hauteur, je lance un petit bout de javascript au chargement de la page qui trouve la hauteur maximale des deux et définit explicitement les autres à la même hauteur. Il me semble que la hauteur: 100% peut signifier "faire la taille nécessaire pour contenir le contenu" quand ce que vous voulez vraiment est "faire à la fois la taille du plus grand contenu."

Remarque: vous aurez besoin de les redimensionner, de nouveau, si quelque chose arrive sur la page pour modifier leur hauteur -- comme un résumé de validation d'être rendues visibles ou bien proportionné d'ouverture du menu.

Answer 3

J'ai réussi à obtenir que cela fonctionne quand je les marges du conteneur à 0:

#container
{
   margin: 0 px;
}

en plus de tous vos autres styles

Answer 4

Vous pourriez avoir à mettre l'un des deux ou les deux:

html { height:100%; }

ou

body { height:100%; }

EDIT: Oups, n'a pas remarqué qu'elles ont été introduites en bourse. Vous avez juste besoin de faire flotter le conteneur.