Ensemble hauteur-min et 100% hauteur ensemble

Question

J'ai navigué sur le Web en essayant de trouver une réponse à ma question de cauchemar css.

Le problème principal semble être d'obtenir une hauteur minimale de 580px et une hauteur de 100% à la fois dans tous les navigateurs.

La chose que je dois réaliser est:

1. Site d'avoir une hauteur minimum de 580px pied de page, y compris la hauteur si total avant les barres de défilement apparaissent est 580px.
2. En outre, une largeur min est nécessaire de 930px, y compris la marge droite et gauche de 15px de chaque côté.
3. menu gauche de 216px de large et 100% de haut moins la hauteur de pied de page 30px.
4. La partie principale de l'écran doit remplir tout l'espace disponible. Sauf si la hauteur de l'écran est inférieure à 580px ou inférieure à 930px. Dans ce cas, vous obtenez des barres de défilement.
5. Compatibilité ie6,7,8, Firefox et Safari.

Peut-il être fait sans Javascript?

Answer 1

Il peut y avoir des moyens plus propres, mais une idée qui vient à l'esprit de la hauteur min (min-height n'est pas interprétée par IE 8 < de toute façon):

place une position absolue, 1 pixel de large, DIV invisible dans le coin gauche de l'écran. Donnez lui 580 pixels de hauteur. Cela devrait faire la hauteur d'au moins 580 pixels.

La même chose devrait être possible avec la largeur horizontale.

Vous devriez alors pouvoir travailler la partie de menu de la manière habituelle.

N'oubliez pas que votre élément HTML a besoin de hauteur: 100% pour la hauteur: 100% pour travailler dans le corps.

Answer 2

D'abord, il n'y a pas de support pour la hauteur minimale dans IE6 ou IE7 sans javascript, point. Donc, la réponse à votre question est non. En général, cependant (et j'avoue que je ne suis pas sûr puisque je ne l'ai pas testé complètement) mais je semble me rappeler que la hauteur: 100% remplace la propriété min-height définie en pixels dans les navigateurs qui le supporter.

Vous pouvez essayer d'utiliser un deuxième div soit à l'intérieur ou à l'extérieur de votre div hauteur de 100% qui est le 580px dont vous avez besoin ...