[overflow - div] Problème de scroll vertical
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:
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:
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%;
} |
