[html] div height="100%" sous FF

**heyax** · 15/03/2007, 00h39

Bonsoir,

Est ce qu'il y a un autre moyen d'ajuster un div a 100% pour que ça marche sous IE et FF, car le style height:100% ne marche que sur IE !

Merci

**cedsun** · 15/03/2007, 01h13

Hello,

Si tu dis à ton div de faire 100% de hauteur, lui, il va se demander 100% de quoi...

Il faut donc spécifier dans tes CSS,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
html {
	height: 100%;
}
body {
	height: 100%;
}

Ton div va se référer à ton body qui va se référer à ton html.

J'espère que ça va t'aider.

**heyax** · 15/03/2007, 11h57

Merci cedsun pour ta réponse,

J'avais deja ajouté les class pour l'html et le body mais sans résultat et c'est ce qui m'etone.

Pour mon cas le div prend exactement le height de son background (sous FF), pour les pages statiques je peux soit inserer un background avec la taille que je souhaite oubien fixier le height de mon div et ça marche, mais le probleme est dans les pages dynamiques, il faut vraiment que le div soit a 100% pour que ça marche dinamiquement.

Ci-joint l'architecture que j'ai fais pour le site, le div en question est "content", Le probleme c'est que le background ne se positionne pas en bas meme si j fais background-position.

Merci

**MasterOfChakhaL** · 15/03/2007, 14h28

Salut,

Le height: 100%, va correspondre à 100% de la partie visible de la fenêtre. Je pense que c'est plutôt min-height que tu veux définir pour ton div.

Pour faire marcher le min-height sur IE (qui ne le connait pas), tu peux t'inspirer de ce post:
http://www.developpez.net/forums/sho...43&postcount=5

**heyax** · 15/03/2007, 16h43

Merci MasterOfChakhaL,

Le min-height marche bien quand je donne une valeure en px mais en % non !

En fait, ce que je veux exactement c'est que mon backrgound qui est un degradé de couleur commence a partir du bas du content, c'est pour ça que j'ai pensé que si le div est a 100% et si j fai le background-position:bottom ça va marcher sur FF, mais si vous avez fait attention au montage dans la piece joint le height du "content" sera le meme que celui du "leftcol, rightcol et m_content"

Alors normalement le degradé doit commencer a partir du bas de mon div, mais pour mon cas il commence du milieux, et si je donne un min-height:750px; a mon div, le background va suivre cette valeur et se poditionera a 750px du div ! c'est une solution parfaite pour les pages statiques, mais pour le dynamique

Je crois que ce n'est plus question de height de div, mais de positonnement de background !!!!

Merci

**Candygirl** · 15/03/2007, 18h20

Hello,

Envoyé par heyax

Le min-height marche bien quand je donne une valeure en px mais en % non !

Normalement il n'y a pas de raison que cela ne fonctionne pas en % du moment que tu as bien spécifié une hauteur pour les parents.

J'ai un peu de peine à bien comprendre ton problème. Tu as besoin que ton site prennent le 100% de la hauteur de la fenêtre quel que soit le contenu ou tu veux, par un min-height règler le problème du #content qui ne suit pas l'agrandissement du contenu des blocs à l'intérieur (probablement positionnés en float?).

Si c'est le deuxième cas il faudrait plutôt chercher du côté d'un clear ou de la création d'un nouveau contexte de formatage (genre ajouter la propriété overflow à ton #content).

**heyax** · 15/03/2007, 22h24

Bonsoir,

Le 2eme cas est exatement mon probleme! je vais voir avec les proprietés clear et overflow et vous répondre si ça marche.

Merci beaucoup Candygirl

**heyax** · 16/03/2007, 00h44

Voila Candygirl, mon div "content" ne suit pas la taille de son contenu ce qui fait que sont background ne se positionne pas la ou je le souhaite ( sous FF ), en faite je metrise pas les proprietes overflow et clear.

Il me faut d'autres indices stp

Merci

**Candygirl** · 16/03/2007, 11h22

La propriété logique pour interrompre un flottement est le clear. Seulement le clear devrait être appliqué à l'élément qui suit tes flottants, à l'intérieur de ton #content. Hors, tu n'as visiblement que tes 3 blocs flottants.

Donc, à part rajouter un div vide exprès à cet effet (moche) ou encore appliquer le clear à la pseudo-classe:hover de ton #content, cette solution ne peut pas être mise en oeuvre dans ton cas.

Il y a plusieurs propriétés, ajoutées à #content, qui vont créer un nouveau contexte de formatage et donc faire en sorte que ce dernier descende jusqu'au bas des flottants:

float
position:absolute
overflow: hidden ou auto
display:inline-block ou table

Voir le lien ci-dessus pour la liste complète. Le positionnement absolu est à rejeter dans ton cas vu ton footer, le display pose problème selon les navigateurs.

Ajouter un:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#content {
  overflow:auto;
}

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#content {
  overflow:hidden;
}

devrait probablement règler ton problème sur les navigateurs autre que IE6. Seulement il faut savoir que cette propriété induit un comportement: overflow:auto verra apparaître une scroll-bar sur ton block si celui-ci a du contenu qui dépasse, hidden cachera se même contneu.

Autrement le float devrait fonctionner dans ton cas et pour tous les navigateurs:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#content {
  width:100%; /* ou la taille prévue si padding */
  float:left;
}
 
#footer {
  clear:both;  /* normalement inutile vu que content utilise le 100%, mais une assurance que ton footer restera au-dessous de ton content au cas où... */
}

Vivement l'implémentation de css3 et de la propriété clear-after prévue pour pallier à ce manque

**heyax** · 16/03/2007, 12h29

Ok Candygirl,

On parle déjà du css3 chez vous

et moi qui se croiyai a jour en css2

Je vais tester ça, et meme si ça marche pas j'aurais apris plein des choses

Merci beaucoups

**heyax** · 21/03/2007, 00h53

Bonsoir,

Comme je t'avais dis Candy meme si ça marche pas j'aurai apris qqchose, sauf que ça a marché

La méthode qui j'ai utilisé est overflow:auto;.

Dernière question: je ne vais pas donner un height a mon div ce qui fait que si mon contenu depasse ne trouvera rien a dépasser!!! et ça va marcher sans scrool. non ?

Merci beaucoup

**Candygirl** · 21/03/2007, 10h27

Envoyé par heyax

Dernière question: je ne vais pas donner un height a mon div ce qui fait que si mon contenu depasse ne trouvera rien a dépasser!!! et ça va marcher sans scrool. non ?

Effectivement, tu as tout à fait compris l'idée

D'ailleurs, de toute manière, il vaut mieux éviter de définir des height pour les différents éléments contenant du texte afin de préserver un bon comportement du site lors de l'agrandissement de la police par l'utilisateur.

Attention, par contre, à spécifier un width à ton div (même si c'est 100%). Donner une dimension permet de doter ton div du "layout" et c'est ça qui va faire que IE6 agrandisse ton div avec les flottants à l'intérieur (sur IE7, par contre, l'overflow a le comportement souhaité).

**heyax** · 21/03/2007, 11h39

Bonjour,

Dernière question

Qu'est ce que tu veux dire par les flottants ? d'apres ce que j'ai compris ce sont les div, mais y a qq chose qui les differe ( div et div(flottant) )

Merci

**MasterOfChakhaL** · 21/03/2007, 11h59

salut,

Un flottant, c'est n'importe quel élément (div ou un autre) pour lequel tu as défini la propriété css float (avec une valeur différente de none, c'est à dire left ou right)

**heyax** · 21/03/2007, 12h04

Merci MasterOfChakhaL, ça m'a eclairé la chose.

Merci infiniment Candy pour toutes tes explications.

Merci developpez.net

[html] div height="100%" sous FF

CSS

Discussions similaires

Partager

Partager