Scroll horizontal non désiré
Bonjour à tous,
Je m'essaie à faire une page html comprenant un header et un footer de hauteur fixe, une partie centrale qui s'adapte à la taille de la fenêtre du navigateur. Depuis que j'ai ajouté en css le scrolling vertical, il apparait aussi en horizontal, alors que le contenue à afficher ne l'impose pas. De plus, l'ascenseur vertical est caché à droite de la fenêtre ce qui oblige à utiliser l'ascenseur horizontal pour y accèder. Je ne me l'explique pas.
Voici mon code xhtml :
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
| <!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="StyleDefault.css" type="text/css">
</head>
<body>
<div id="header">
<p>header...</p>
</div>
<div id="conteneur" class="scroll">
<p>content1</p>
<p>content2</p>
<p>content3</p>
<p>content4</p>
<p>content5</p>
<p>content6</p>
<p>content7</p>
<p>content8</p>
<p>content9</p>
<p>content10</p>
<p>content11</p>
<p>content12</p>
<p>content13</p>
<p>content14</p>
</div>
<div id="footer">
<p>footer...</p>
</div>
</body>
</html> |
et li fichier css :
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
| body { margin:0; padding:0; width:100%; height:100%; }
* {
margin:0; padding:0;
}
html{
height: 100%;
}
div.scroll {
height: 200px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 5px;
}
#header {
width : 100%;
height : auto;
position:absolute;
top:0; left:0;
}
#footer {
width: 100%;
height: 50px;
position: absolute;
bottom:0; left:0;
}
#conteneur {
width: 100%;
left:0;
bottom:50px;
position: absolute;
overflow:auto;
} |
Merci de votre aide
