[CSS] Pb header footer et div scrollable

**hurricane** · 27/02/2006, 17h51

Bonjour,
j'ai longuement recherché et trouvé des débuts de réponse sur ce forum mais en vain impoosoble de mettre la mian sur la réponse.

J'ai une page dont une entéte (header) fixe un pied fixe (footer) et entre les deux un main.
Le footer et le header doit être toujours respectivement en haut et en bas même quand l'utilisateur modifie la taille de son navigateur.
De plus le main doit donc se redimensionner automatiquement et offrir une scrollbar lorsqu'il le faut.

Pour le moment header et footer toujours à leur place respective ça marche.
PAr contre problème pour toujours avoir un main à 100% avec une scrollbar quand il le faut

J'espère que vous avez compris mon problème et espère que vous trouverai une solution

Merci d'avance !

**Crazyblinkgirl** · 27/02/2006, 18h10

Bonjour,

Peux-tu montrer ton code stp?

**hurricane** · 27/02/2006, 18h19

ok
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
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}
 
body {
  font: 11px Verdana, sans-serif;
  text-align: center;
  background-image:url(images/fond.jpg);
  background-repeat:repeat-x;
}
 
#conteneur_page {
  margin: 0 auto;
  width: 750px;
  background: #DDD;
  text-align: left;
  position: relative;
  min-height: 100%;
  max-height: 100%; 
  height: 100%; 
}
 
#haut {
	background-color:#151515;
	width:100%;
	background-image:url(images/haut.jpg);
	background-position:left;
	background-repeat:no-repeat;
	height: 50px;
}
 
#menu
{
	height:20px;
	background-color:#FFFFFF;
	vertical-align:middle;
}
 
a.menu
{
	color:#000000;
	text-decoration: none;
	font-size:11px;
	font-weight: bold;
	text-align: center;
	padding-left:20px;
	padding-right:20px;
	line-height:20px;
}
 
a.menu:hover {
  background-color:#E3E3E3;
}
 
#conteneur {
  padding: 0 0 40px 1em;
}
 
#conteneur:after {
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}
 
#princ {
 
	float : right;
	width :80%;
}
 
#princ_texte {	
	position:absolute;
	overflow-y:scroll;
	overflow-x:hidden;
 
}
 
#menu_context {
	float : left;
	width : 18%;
}
 
#bas {
  width: 100%;
  background-color:#333333;
  position: absolute;
  bottom: 0 !important;
  bottom: -1px;
  height: 20px;
  padding: 0 0em;
  line-height: 20px;
 
}
 
a.bas{
	color:#FFFFFF;
	text-decoration: none;
	font-size:11px;
	font-weight: bold;
	text-align: center;
	padding-left:20px;
	padding-right:20px;
	line-height:20px;
}
 
.titre {
	font-size: 16px;
	color: #CCCCCC;
	font-weight: bold;
	line-height:40px;
}
 
table
{
	font: 11px Verdana, sans-serif;
	text-align:left;
}

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
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
<HTML>
	<HEAD>
		<title>Effect Software</title>
		<LINK href="style.css" type="text/css" rel="stylesheet">
			<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	</HEAD>
	<body>
		<div id="conteneur_page">
			<div id="haut"></div>
			<div id="menu"><A class="menu" href="index.aspx">Accueil</A> <A class="menu" href="index.aspx?cat=prod">
					Produits</A> <A class="menu" href="index.aspx?cat=ser_for">Services &amp; Formations</A> <A class="menu" href="#">
					Education</A><A class="menu" href="#">Support &amp; téléchargement</A>
			</div>	
			<div id="conteneur">
 
 
	<div id="princ">
 
 
			  	<div id="princ_texte">
		<ul>  
          <li>sqdqsdqsd</li>
	      <li>sqdqsdqsd</li>
	      <li>sqdqsdqsdqsdsqd</li>
	      <li>ezrezrezrzerezrezrezrezr</li>
	      <li>ezrezrzerzerzerezrr</li>
	      <li>ezrzerzer</li>
	      <li>sdfdsfdsfdsfsdfsdf</li>
	      <li>sdfdsfdsfdsfsdfsdf</li>
	      <li>sdfdsfdsfdsfsdfsdf</li>
	      <li>sdfdsfdsfdsfsdfsdf</li>
	      <li>sdfdsfdsfdsfsdfsdf</li>
	      <li>sdfdsfdsfdsfsdfsdf</li>
	      <li>sdfdsfdsfdsfsdfsdf</li>
	      <li>sdfdsfdsfdsfsdfsdf</li>
	      <li>sdfdsfdsfdsfsdfsdf</li>
	      <li>sdfdsfdsfdsfsdfsdf</li>
	      <li>sdfdsfdsfdsfsdfsdf</li>
	      <li>sdfdsfdsfdsfsdfsdf</li>
	      <li>sdfdsfdsfdsfsdfsdf</li>
	      <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
 <li>sdfdsfdsfdsfsdfsdf</li>
</ul>
 
	  </div>
  </div>
 
</div>
			<div id="conteneur_bas">
				<div id="bas"><A class="bas" href="#">A propos d'</A> <A class="bas" href="#">
						Contactez-nous</A>
				</div>
			</div>
		</div>
	</body>
</HTML>

**Davboc** · 28/02/2006, 00h50

Code :

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

overflow:auto;

dans ton css pour avoir la scrollbar qui apparait en cas de besoin
je crois pas que ce soit 100% qu'il faille mettre vu qu'il ne doit faire qu'une partie de la page... peut être que 100%-70px ça marche... a tenter j'ai de gros doute qd meme

voila c tout ce que je peux te dire...

**Crazyblinkgirl** · 28/02/2006, 10h36

Bonjour,

Essaies :

Code :

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

1
2
3
4
5
6
7
8
9
 
#conteneur { 
  padding: 0 0 40px 1em; 
  overflow:auto;
  height:482px;
} 
#princ_texte {    
   position:absolute;     
}

**hurricane** · 28/02/2006, 13h13

pour la solution :

Code :

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

1
2
3
4
5
6
 
#conteneur {
  padding: 0 0 40px 1em;
  overflow:auto;
  height:482px;
}

L'affichage ne sera pas dynamique selon la taille du navigateur.

je vais testé ça et je vous dit quoi...

**hurricane** · 28/02/2006, 13h59

Non ça ne fonctionne pas.
Franchement si une personne trouve, ça serait vraiment trop cool !!

Je continue de chercher de mon côté.

**hurricane** · 02/03/2006, 10h40

c bon j'y suis arrivé en utilisant du javascript...

[CSS] Pb header footer et div scrollable

CSS

Vue hybride

Discussions similaires

Partager

Partager