[overflow - div] Problème de scroll vertical

**crakocrako** · 01/10/2009, 15h44

Bonjour,

J'ai créé une page avec un div formant un header ainsi qu'un div avec le contenu de la page en dessous. Ces deux divs sont en positions absolute et le div contenu est décalé du haut de la page par la propriété top.

Ce qui me pose problème est que si ce que je mets dans la partie contenu est plus long que la fenêtre du navigateur, une barre de scroll verticale se met sur toute la page et non seulement sur le div du contenu.
Ce que j'aimerais c'est que le scroll ne se mette que dans la partie contenu en laissant tout le temps visible le header.

De plus je ne sais pas comment faire pour que le div du contenu aille jusqu'au fond de la fenêtre. Si je mets la propriété height du div contenu à 100%, il passe plus bas que la fenêtre du navigateur (à cause du top) ce qui fait qu'un scroll vertical inutile apparaît...

Ainsi que les codes:

html:

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
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
        <title>Test developpez</title> 
        <link href="general.css" media="screen" rel="stylesheet" type="text/css" /> 
        <link href="layout.css" media="screen" rel="stylesheet" type="text/css" />
        <link href="contact.css" media="screen" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="divHead">
            <img src="images/head/logo.png" width="340" height="60" />
        </div>
        <div id="divContent">
            <div id="divLinesContainer">
                <div id="divContactLine">
                    <div id="divContactLineTopLeftTxt">
                        <span class="contactListTop">NOM Prenom M.</span>
                    </div>
                    <div id="divContactLineBottomLeftTxt">
                        <span class="contactListBottom">adresse</span>
                    </div>
                    <div id="divContactLineTopRightTxt">
                        <span class="contactListBottom">e-mails</span>
                    </div>
                    <div id="divContactLineBottomRightTxt">
                        <span class="contactListBottom">num telephones</span>
                    </div>
                </div>
                ...
            </div>
        </div>
    </body> 
</html>

les css utiles:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
*
{
	margin:0;
	padding:0;
}
 
html
{
	height:100%;
	width:100%;
}
 
body
{
	height:100%;
	width:100%;
	font-family:Verdana;
	font-size:0.8em;
}
 
#divLinesContainer
{
	text-align:left;
	position:relative;
	width:100%;
	overflow:auto;
}
 
#divContactLine
{
	text-align:left;
	position:relative;
	height:45px;
	width:100%;
	background-image:url('images/content/contact/contactList.png');
	background-repeat:no-repeat;
}
 
#divHead 
{
	height:60px;
	width:100%;
	text-align:center;
	position:absolute;
	top:0;
	left:0;
	background-image:url('images/head/background.png');
	background-repeat:repeat-x;
}
 
#divContent 
{
	position:absolute;
	top:94px;
	left:0;
	background-image:url('images/content/background.png');
	background-repeat:repeat-x;
	min-height:60px;
	width:100%;
}

**tzilliox** · 06/10/2009, 02h02

Bonsoir crakocrako,

si j'ai bien compris, le but est de garder ton header toujours à l'écran ?
Dans ce cas-là, tu peux utiliser la propriété CSS position:fixed. Voici un : Exemple d'une page avec un header fixe.

Concernant ton code HTML, je peux te donner quelques conseils :
1. Pas besoin de mettre 'div' au début de tes noms d'id. Dans tes règles css, tu peux indiquer l'élément si tu le souhaites. cela donnerait "div#head" au lieu de "#divHead"
2. Pense à utiliser des classes ! #divContactLine, #divContactLineTopLeftTxt, #divContactLineBottomLeftTxt, #divContactLineTopRightTxt et divContactLineBottomRightTxt sont répétés plusieurs fois. Il faut donc utiliser des classes.
3. N'abuses pas des position:absolute ou relative. Car ton design ne s'adaptera pas à la taille de ton contenu.
Essaye de garder le flux de ta page, c'est à dire qu'un div est positionné par rapport au div du dessus. Puis pour positionner les éléments à gauche ou à droite de ta page, essayes de jouer avec les propriétés text-align et float.

Y'a encore du travail au niveau CSS / HTML donc courage ! Mais le design est bien sympa !

Bonne nuit,
Thomas.