Discussion :

[kayoum]

Bonjour, après avoir longtemps parcouru internet, je me décide à poser ma question sur ce forum, faute d'avoir réussi à trouver une réponse adéquate.

Mon problème est simple:

je veux afficher sur la page, les éléments suivants:

• un header de 15 pixels situé en haut et collé à gauche, occupant toute la largeur
• un footer de 15 pixels situé en bas et collé à gauche, occupant toute la largeur également
• un content central dont le haut est collé au bas du header et dont le bas est collé au haut du footer.

Je veux que la taille du content remplisse toujours l'espace libre entre le header et le footer (indépendamment du contenu)
Je veux également qu'une scrollbar lui soit ajoutée si le contenu dépasse la taille d'affichage.
Si je réduis la fenêtre, ou change de résolution, il faut que ces contraintes soient toujours respectées (pas de scroll bar de la page, seulement de l'espace "content")

Pour le moment j'ai essayé avec des div, j'arrive à générer correctement le header et le footer, mais la ou je bloque c'est pour le milieu.

Je m'en remet à vos talents et à votre pédagogie
Merci de votre attention, et bonne après-midi.

Guillaume

[Huitzilopochtli]

Qu'est ce que tu veux que ton footer soit en bas de ton écran (quel que soit la résolution) ou en bas de ta page ?

Est-ce que le simple fait de définir une hauteur à ta div centrale ne suffit pas ?

[kayoum]

Je souhaite la positionner en bas de l'écran, quelle que soit la résolution. De ce fait, ne connaissant pas la taille de l'élément central, je coince. Je pourrais réaliser ceci en javascript en calculant:
hauteur content = résolution de l'écran - (hauteur header+hauteur footer)
mais je pense qu'il existe une façon plus propre de le faire.
Merci de ta réponse.
Guillaume

[Huitzilopochtli]

Peut-être une piste :

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
<style>
	#header {
		position: absolute;
		top: 0;
		height: 15px;
		width: 100%;
		background: red;
		font-size: 10px;
	}
	#content {
		background: blue;
		margin-top: 15px;
		margin-bottom: 15px;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
	}
	#footer {
		position: absolute;
		bottom: 0;
		height: 15px;
		width: 100%;
		background: green;
		font-size: 10px;
	}
</style>
 
<div id="header">
	header
</div>
<div id="content">
	content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
	content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
</div>
<div id="footer">
	footer
</div>

[kayoum]

Merci de ta réponse.
En fait non cela ne marche pas, j'avais déjà essayé: l'attribut height:100% appliqué au div content lui impose une taille de 100% de la page, et non de l'espace restant. Donc cela déborde sous le footer

Guillaume

[Huitzilopochtli]

Ca ne déborde pas si tu met des marges:

Code :

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

1
2
		margin-top: 15px;
		margin-bottom: 15px;

[kayoum]

Si j'augmente la taille du content en ajoutant des choses, si cela déborde.
EDIT: en outre, lorsqu'il y'a peu d'information dans le content, alors il ne prend pas toute sa place

RE-EDIT:
Problème résolu grâce au javascript dont voici le code (utilisation de JQUERY pour faciliter la chose : le développeur est feniant

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
 
$(document).ready(function()
{
 
			sizeFixed=$("#header").height()+$("#footer").height();
			documentSize=$(document).height();
			$("#content").css("height", documentSize-sizeFixed);
 
 
 
});

[Macmillenium]

Sinon tu as un exemple http://www.developpez.net/forums/d81...l/#post4668309

Pas besoin d'utiliser jQuery pour un truc basique