[CSS] Pb header footer et div scrollable

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 !

Bonjour,

Peux-tu montrer ton code stp?

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

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>

Code:

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

Bonjour,

Essaies :

Code:

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

pour la solution :
Code:

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

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

Je continue de chercher de mon côté.

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