Div 100% de la hauteur fonctionne sur Firefox mais pas sous IE

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 que je suis absent?

InformationsquelleAutor Marcel | 2008-10-06

75

Je pense "fonctionne très bien dans Firefox" est dans le mode Quirks rendu seulement.
Dans le mode Standard rendu, qui pourrait ne pas fonctionner correctement dans Firefox aussi.

pourcentage dépend de "qui contient un bloc", au lieu de la fenêtre d'affichage.

Spécification CSS dit

Le pourcentage est calculé avec
le respect à la hauteur de l'généré
la boîte contient un bloc. Si la hauteur
du bloc contenant n'est pas
spécifié explicitement (c'est à dire, ça dépend
sur le contenu de la hauteur), et cet élément
n'est pas en position absolue, la
valeur calcule à "auto".

donc
```
#container { height: auto; }
#container #mainContentsWrapper { height: n%; }
#container #sidebarWrapper { height: n%; }
```
signifie
```
#container { height: auto; }
#container #mainContentsWrapper { height: auto; }
#container #sidebarWrapper { height: auto; }
```
Tendre vers les 100% de la hauteur de la fenêtre d'affichage, vous devez spécifier la hauteur du bloc contenant (dans ce cas, il est #conteneur).
En outre, vous devez également spécifier la hauteur du corps et de l'html, car initiale Contenant le Bloc est "UA-dépendante".

Tous vous avez besoin est...
```
html, body { height:100%; }
#container { height:100%; }
```
- grande explication de mec
InformationsquelleAutor
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.
- ++ Vous passerez beaucoup moins de temps à arriver juste avec javascript que vous allez essayer de le faire avec les css. Je sais que c'est les "mauvaises pratiques" dans le monde de le faire de cette façon...mais dans le monde des affaires, les "mauvaises pratiques" est passé de 10 heures à faire quelque chose dans le css qui pourrait être fait en 5 minutes avec le javascript.
- oui, mais avec un grain de sel: ensuite, vous devez penser à le redimensionnement de la fenêtre, ou pliantes éléments de basculement ou... "solutions rapides" sont souvent pas rapide.
InformationsquelleAutor tvanfosson
2

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

Êtes-vous de 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.

InformationsquelleAutor bryansh
2

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

InformationsquelleAutor casademora
1

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.

InformationsquelleAutor Jarett Millard
1

J'ai fait quelque chose de très similaire à ce que "tvanfosson' a dit, c'est en fait l'utilisation de JavaScript pour surveiller en permanence la hauteur disponible dans la fenêtre grâce à des événements comme onresize, et utiliser cette information pour modifier la taille du conteneur en conséquence (comme pixels, plutôt qu'en pourcentage).

Gardez à l'esprit, ce ne dire un JavaScript de dépendance, et il n'est pas aussi lisse comme un CSS solution. Vous auriez également besoin de s'assurer que la fonction JavaScript est capable de correctement retour de la taille de la fenêtre dans tous les principaux navigateurs.

Laissez-nous savoir si l'un des mentionné précédemment CSS solutions de travail, comme il sonne comme une meilleure façon de résoudre le problème.

InformationsquelleAutor Matt Refghi
0

Je ne pense pas que IE prend en charge l'utilisation de l'auto pour le réglage de la hauteur /largeur, de sorte que vous pourraient tenter de donner à cette forme de valeur numérique (comme Jarett l'indique).

Aussi, il ne semble pas que vous êtes centre de votre flotte correctement. Essayez d'ajouter ceci dans votre CSS pour #container:
```
#container {
    height:100%;
    width:100%;
    overflow:hidden;
    /* for IE */
    zoom:1;
}
```
InformationsquelleAutor Ian Oxley

Essayer cette..

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

InformationsquelleAutor Designerfoo

Vous devez vous connecter pour publier un commentaire.