Div avec overflow: contenu qui dépasse sous FF

**cortex024** · 11/10/2010, 14h24

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 :

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

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

**c_s_s** · 11/10/2010, 14h55

Bonjour,

Avec le code que tu donnes, je ne constate pas le problème dont tu parles.

**cortex024** · 12/10/2010, 08h48

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

**mouss4rs** · 12/10/2010, 09h50

Oui c'est vrai que je comprend pas trés bien ca fonctionne avec ton code sous FF.

**c_s_s** · 12/10/2010, 10h02

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

**cortex024** · 12/10/2010, 10h55

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

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

Code :

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

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

**c_s_s** · 12/10/2010, 11h49

Ok.

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

**cortex024** · 12/10/2010, 12h32

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

**c_s_s** · 12/10/2010, 12h41

Avec un positionnement absolu tu pourrais t'en sortir :

Code :

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

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 :

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

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.

**cortex024** · 12/10/2010, 13h30

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

Div avec overflow: contenu qui dépasse sous FF

CSS

Discussions similaires

Partager

Partager