Scroll horizontal non désiré

**awalter1** · 28/02/2012, 19h54

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 :

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
<!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 :

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
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

**awalter1** · 28/02/2012, 20h03

En fait, je viens de m'apercevoir d'un autre problème : bien que la partie centrale dispose d'un scroll vertical, le redimensionnement en hauteur de ma fenêtre fait que la partie centrale se superpose à la partie header : ce que je voulais éviter.
En résumé, ce que je voulais faire :
un header et un footer de hauteur fixe
une partie centrale qui s'adapte avec le dimensionnement de la fenêtre à l'aide d'un scroll.
Merci

**awalter1** · 28/02/2012, 22h59

En cherchant j'ai bien trouvé http://j-willette.developpez.com/tut...mple-page.html qui corresponds à peu près à ce que je voulais faire à la différence que le scroll est fait au niveau de la fenêtre et pas seulement sur la partie centrale. mais le rendu est similaire.

Scroll horizontal non désiré

Défilement en CSS

Discussions similaires

Partager

Partager