adapter le contenu à la taille de la fenêtre

**awalter1** · 28/02/2012, 11h24

Bonjour,
J'ai lu beaucoup de choses sur le dev. web, tester des exemples d'html, de css, de php. Je ne trouve pas ce qui me semble assez basique. Peut être que mon besoin n'est pas dans la logique "web".
Je souhaite que mes pages possèdent un entête et un pied de page de dimension fixe en hauteur qui soient toujours visibles, en conséquence le centre de la page (ce qui est entre l'entête et le pied de page) devrait prendre la place restante (je ne veux pas de scroll pour cette partie, ni pour la page elle même d'ailleurs). Cette place dépendant évidemment de la taille de la fenêtre du navigateur.
Je pensais avoir trouvé la solution mais mon pied de page n'est pas en bas de ma page, ça semble dépendre du contenu de lla zone centrale:

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
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-fr">
<style type="text/css">
#header{
width : 100%;
height : 150px;
}
#footer {
width : 100%;
height : 150px;
}
#conteneur {
margin : 0 auto;
width : 100%;
height : 100%;
padding : 5px;
}
</style>
</head>
<div id="header">
<p align="center"><b><font color="#0000CC" size="7">footer1</font></b></p>
</div>
<div id="conteneur">
  <p align="center"><b><font color="#0000CC" size="7">content</font></b></p>
</div>
<div id="footer">
<p align="center"><b><font color="#0000CC" size="7">footer1</font></b></p>
</div>
</html>

Je m'attendais à trouver des spécifications telle que haut de page ou bas de page pour le positionnement des zones, ce n'est pas le cas.
Ma demande est t'elle réaliste ?
Merci de votre éclairage

Invité · 28/02/2012, 13h14

Bonjour,
oui, c'est possible :

Code html :

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
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-fr">
<head>
 
<style type="text/css">
* { 
margin:0; padding:0;
}
html, body { 
margin:0; padding:0; width:100%; height:100%; 
}
#global { 
margin:0; padding:0; width:100%; height:100%;
position: relative;
}
#header {
width : 100%;
height : 150px;
position:absolute;
top:0; left:0;
/* background: green; */
}
#footer {
width: 100%;
height: 150px;
position: absolute;
bottom:0; left:0;
/* background: red; */
}
#conteneur {
width: 100%;
top:150px; left:0;
bottom:150px;
position: absolute;
overflow:auto;
/* background: yellow; */
}
</style>
 
</head>
<body>
<div id="global">
 
<div id="header">
	<p>header...</p>
</div>
<div id="conteneur">
	<p>content...</p>
</div>
<div id="footer">
	<p>footer...</p>
</div>
 
</div>
</body>
</html>

Remarques :
- les balises <body> ... </body> Ne sont PAS facultatives...
- la balise <font ...> est obsolète.

**awalter1** · 28/02/2012, 16h22

Si je comprends il me manquait la directive body avec height 100%.
Merci beaucoup pour ce dépannage

PS :A priori la directive <div id="global"> n'est pas nécessaire pour mon problème ( elle l'est peut être pour des contraintes de conception autres).

adapter le contenu à la taille de la fenêtre

Discussions similaires

Partager

Partager