Div avec overflow: contenu qui dépasse sous FF

Version imprimable

11/10/2010, 14h24
cortex024

Div avec overflow: contenu qui dépasse sous FF
Bonjour,

j'ai une div plus générale qui englobe.
dans cette div, j'ai 3 div une au dessous de l'autre.
en gros, un header et un footer.
dans la div du milieu, j'ai mis la propriété overflow:scroll; afin que si le contenu reste bien à l'intérieur de la div globale avec des barres de défilement.

sous IE7, ca fonctionne très bien.
Sous firefox, le contenu déborde de ma div globale, donc à travers la div "footer" et la div globale.

voici le code:
Code:

1 2 3 4 5 6 7 <div style="width:750px; height:100px; text-align:center;"> <div>header</div> <div style="overflow:scroll;" > mon contenu large </div> <div>footer</div> </div>
donc sous IE, ma div de contenu reste bien contenue avec des barres de défilement pour voir tout le contenu large.
sosu FF, le contenu large dépasse à travers tout

merci de votre aide
11/10/2010, 14h55
c_s_s

Bonjour,

Avec le code que tu donnes, je ne constate pas le problème dont tu parles.
12/10/2010, 08h48
cortex024

j'ai oublié de coller une partie du code.

en fait, dans le div overflow, il y a ceci: width:95%; height:95%;

Car le div général peut être redimensionné (via javascript)
mes div header et div footer doivent eux garder la même hauteur.
il faut donc que je dise à mon div central de contenu d'occuper tout l'espace possible - hauteur header - hauteur footer.

j'avais essayé avec les % mais si il y a une autre solution qui peut en même temps m'éviter de passer par cette méthode qui a des comportements différents suivant les navigateur je suis preneur :)
12/10/2010, 09h50
mouss4rs

Oui c'est vrai que je comprend pas trés bien ca fonctionne avec ton code sous FF.
12/10/2010, 10h02
c_s_s

Tu as une page en ligne pour voir le problème ?
Là, avec un code incomplet, on ne peut pas t'aider.

Citation:

Envoyé par c_s_s

Tu as une page en ligne pour voir le problème ?
Là, avec un code incomplet, on ne peut pas t'aider.

non et c'est impossible :calim2:

par contre, voici pour illustrer ce "dépassement"
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <html> <head> </head> <body> <div style="width:300px; height:300px; text-align:center; background-color:Gray;"> <div>header</div> <div style="overflow:scroll; width:95%; height:95%"> mon contenu large<br> </div> <div>footer</div> </div> </body> </html>
Ce code sous IE, le Div conteneur continue bien à englober le div overflow, ce qui est logique vu qu'il le contient.
sous FF, le div contenu dépasse du div conteneur.

Ce que je veux, c'est juste que mon div overflow occupe le max d'espace. si il y a un moyen dynamique pour que la hauteur de mon div overflow = hauteur div conteneur - hauteur header - hauteur footer je suis partant

12/10/2010, 11h49
c_s_s

Ok.

Est-ce que le header et le footer ont une hauteur fixe ?
12/10/2010, 12h32
cortex024

Citation:

Envoyé par c_s_s

Ok.

Est-ce que le header et le footer ont une hauteur fixe ?

oui :)

donc si y a un moyen pour que mon height de mon div overflow puisse être: GetHeightParent-35px (hauteur header+hauteur footer) ça me résoudrait mon problème :ccool:

Avec un positionnement absolu tu pourrais t'en sortir :

Code:

1
2
3
4
5
6
7
<div id="main">
	<div id="header">Header</div>
	<div id="content">		
		Contenu
	</div>
	<div id="footer">Footer</div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#main {
    width:300px;
    height:400px;
    position:relative;   
}
#header, #footer {
    position:absolute;
    width:100%;
}
#header {
    height:25px;
}
#footer {    
    bottom:0;
    height:30px;    
}
#content {
    position:absolute;
    top:25px; /* hauteur du header */
    bottom:30px; /* hauteur du footer */
    width:100%;    
    overflow:auto;
    overflow-x:hidden;
}

Bon, là j'ai mis la hauteur u=du bloc #main dans la feuille de style, mais j'ai cru comprendre que tu modifiais cette hauteur en javascript, donc je te laisse le soin de la définir où tu le souhaites.

12/10/2010, 13h30
cortex024

merci pour ta réponse.

ce n'était pas encore tout a fait ça pour mon cas, mais en jouant avec une position absolute et en définissant des marges comme tu as fait (mais SANS définir le width=100%) j'ai réussi à avoir un affichage correct qui ne déborde plus sous différents navigateurs!

merci :ccool: