web-dev-qa-db-fra.com

Div 100% height fonctionne sur Firefox mais pas dans IE

J'ai un div de conteneur qui contient deux div internes; les deux devraient prendre 100% de largeur et 100% de hauteur dans le conteneur.

J'ai réglé les deux divisions internes à 100% de hauteur. Cela fonctionne bien dans Firefox, cependant dans IE les divs ne s'étirent pas à 100% de hauteur mais seulement la hauteur du texte à l'intérieur.

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;
}

Y a-t-il quelque chose que je fais mal? Ou des bizarreries Firefox/IE que je manque?

htmlcssinternet-explorerfirefox
46
Marcel

Je pense que "fonctionne bien dans Firefox" est uniquement dans le mode Quirks . Dans le rendu en mode standard , cela pourrait ne pas fonctionner correctement dans Firefox aussi.

le pourcentage dépend du "bloc contenant", au lieu de la fenêtre.

La spécification CSS dit

Le pourcentage est calculé par rapport à la hauteur du bloc contenant la boîte générée. Si la hauteur du bloc conteneur n'est pas spécifiée explicitement (c'est-à-dire qu'elle dépend de la hauteur du contenu) et que cet élément n'est pas absolument positionné, la valeur est calculée sur `` auto ''.

alors

#container { height: auto; }
#container #mainContentsWrapper { height: n%; }
#container #sidebarWrapper { height: n%; }

veux dire

#container { height: auto; }
#container #mainContentsWrapper { height: auto; }
#container #sidebarWrapper { height: auto; }

Pour étirer à 100% de la hauteur de la fenêtre, vous devez spécifier la hauteur du bloc conteneur (dans ce cas, c'est #container). De plus, vous devez également spécifier la hauteur du corps et du html, car le bloc contenant initial est "dépendant de l'UA".

Tout ce dont tu as besoin c'est...

html, body { height:100%; }
#container { height:100%; }
75
timeblue

J'ai réussi à faire fonctionner cela lorsque j'ai défini les marges du conteneur à 0:

#container
{
   margin: 0 px;
}

en plus de tous vos autres styles

2
casademora

Il est difficile de vous donner une bonne réponse, sans voir le code HTML que vous utilisez réellement.

Produisez-vous un doctype/utilisez-vous un rendu en mode standard? Sans réellement pouvoir examiner une repro html, ce serait ma première supposition pour une différence d'interprétation html entre Firefox et Internet Explorer.

2
bryansh

Je ne sais pas quel problème vous résolvez, mais lorsque j'ai deux conteneurs côte à côte qui doivent être de la même hauteur, j'exécute un petit javascript au chargement de la page qui trouve la hauteur maximale des deux et définit explicitement l'autre sur la même hauteur. Il me semble que la hauteur: 100% pourrait simplement signifier "en faire la taille nécessaire pour contenir entièrement le contenu" alors que ce que vous voulez vraiment est "faire à la fois la taille du plus grand contenu".

Remarque: vous devrez les redimensionner à nouveau si quelque chose se produit sur la page pour modifier leur hauteur - comme un résumé de validation rendu visible ou une ouverture de menu pliable.

2
tvanfosson

Vous devrez peut-être mettre un ou les deux:

html { height:100%; }

ou

body { height:100%; }

EDIT: Oups, n'a pas remarqué qu'ils flottaient. Il vous suffit de faire flotter le conteneur.

1
Jarett Millard

J'ai fait quelque chose de très similaire à ce que `` tvanfosson '' a dit, c'est-à-dire utiliser JavaScript pour surveiller constamment la hauteur disponible dans la fenêtre via des événements comme onresize, et utiliser ces informations pour modifier la taille du conteneur en conséquence (en pixels plutôt qu'en pourcentage) ).

Gardez à l'esprit que cela ne signifie une dépendance JavaScript, et ce n'est pas aussi fluide qu'une solution CSS. Vous devez également vous assurer que la fonction JavaScript est capable de correctement renvoyer les dimensions de la fenêtre sur tous les principaux navigateurs.

Faites-nous savoir si l'une des solutions CSS mentionnées précédemment fonctionne, car cela semble être une meilleure façon de résoudre le problème.

1
Matt Refghi

Essaye ça..

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

#container #mainContentsWrapper
{
   float: left;

   height: auto;
   min-height:100%
   width: 70%;
   margin: 0;
   padding: 0;
}


#container #sidebarWrapper
{      
   float: right;

   height: auto;
   min-height:100%
   width: 29.7%;
   margin: 0;
   padding: 0;
}
0
Designerfoo

Je ne pense pas que IE supporte l'utilisation de auto pour définir la hauteur/largeur, vous pouvez donc essayer de lui donner une valeur numérique (comme Jarett le suggère).

De plus, il ne semble pas que vous nettoyiez correctement vos flotteurs. Essayez d'ajouter ceci à votre CSS pour #container:

#container {
    height:100%;
    width:100%;
    overflow:hidden;
    /* for IE */
    zoom:1;
}
0
Ian Oxley