Wrapper en trois parties

09 oct. 2008, 21:09

Bonsoir,
je réflechis actuellement a un concept d'application, et je cherchais a résoudre un petit problème.
C'est une application a base d'ajax pour laquelle j'ai besoin d'avoir une page principale en trois parties disposées de façon verticale.
En haut un menu, en bas une sorte de pied de page un peu spécial, et au milieu le contenu, mais ma contrainte, c'est que le menu bas doit coller le bas du navigateur et le menu du haut coller le haut, et le contenu devant prendre le reste de la place. Ca ferait en gros une sorte de pseudo frame au milieu de la page.
Mais mon problème est: comment gérer la hauteur de cette div au milieu, sachant que celle des deux autres sera d'environ une vingtaine de pixels chacune ?
Merci d'avance

10 oct. 2008, 10:04

Bonjour,

Si tes bandeaux en haut et en bas sont de hauteur fixes tu peux tout faire en "absolute" :

Code : Tout sélectionner

<style type="text/css">
#haut {
	position:absolute;
	top:0px;
	background-color:red;
	height:10px;
	width:100%;
}

#bas {
	position:absolute;
	bottom:0px;
	background-color:blue;
	height:10px;
	width:100%;
}

#milieu {
	top:10px;
	bottom:10px;
	position:absolute;
	background-color:green;
	width:100%;
}

</style>

Tu positionnes le haut et le bas sur les bords haut et bas de la fenetre, et la div du milieu a +10 et -10...

Je pense qu'il y a une facon pour que #milieu ne soit pas en absolute et prenne "tout l espace laissé entre haut et bas" mais j'ai pas trouvé la comme ca... Quelqu'un d'autre te dira surement comment faire si l'absolute ne convient pas

10 oct. 2008, 17:53

Pas bête, je ne pensais pas qu'on pouvait utiliser bottom et top en même temps

11 oct. 2008, 17:45

Hey

,

Bien sûr que si, on peut. En revanche, cette solution a très peu de chance d'être fonctionnelle sous IE 6. À toi de voir

.
Regarde du côté d'Alsacréations sinon, ils ont plusieurs articles à ce sujet (voir le blog CSS).

11 oct. 2008, 19:40

Ok merci HyWaN

11 oct. 2008, 23:53

Modération :
momox, si ta question est résolue, pense à ajouter le tag [Résolu]
pour indiquer aux personnes qui voudront consulter ce sujet qu'il contient une solution.
Tu peux réaliser cette opération en cliquant sur le bouton

en haut à gauche de ce sujet.

Wrapper en trois parties

Qui est en ligne