Mise en page qui s'adapte à la fenêtre

**twisel** · 26/02/2013, 14h06

bonjour,

je souhaite faire un site qui fonctionne sur le principe header/conteneur/footer.
je voudrais que le header et le footer aient toujours la même hauteur et que la hauteur du conteneur s'adapte en fonction de la taille de la fenêtre, comme sur l'exemple ci-dessous:

Nom : capturedcran20130226132.png
Affichages : 1776
Taille : 53,2 Ko

Nom : capturedcran20130226132.png
Affichages : 1776
Taille : 53,2 Ko

Nom : capturedcran20130226133.png
Affichages : 1691
Taille : 61,4 Ko

les header et footer sont composés de textes et liens et le conteneur d'une image qui s'adapte à la taille de la div (soit en hauteur soit en largeur de sorte que la div soit toujours remplie)et qu'il n'y ai jamais de scroller.

mon code est de ce type:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<div id="global">
<div id="header">
xxxxx
</div>
<div id="conteneur">
image
</div>
<div id="footer">
xxxxxxxxx
</div>
</div>
</body>

pouvez-vous m'aider?

**Bovino** · 26/02/2013, 14h34

http://www.developpez.net/forums/d12...s/#post6704356

**twisel** · 26/02/2013, 15h19

merci pour ce lien, je l'avais vu et c'est même celui-ci que j'ai utilisé!

le problème est en fait la taille de l'image dans le conteneur qui ne s'adapte pas à celui-ci, puisqu'il n'a pas de taille attribuée...

en gros: comment adapter la taille de l'image de telle sorte à ce qu'elle soit entre le header et le footer sur toute la hauteur?

je ne sais pas si je suis très clair...

voici mon CSS:

Code :

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

1
2
3
4
#global {margin:0; padding:0; width:100%; min-height:100%; position: relative; padding-bottom:0;}
#header {border-bottom:solid 1px #000000; width:100%; position:relative; height:50px;}
#conteneur {position: relative; padding-bottom :50px;  /* hauteur pied de page */ overflow : hidden;}
#footer {position: absolute; bottom: 0; left: 0; margin-top :-50px; /* - hauteur pied de page */ height:50px; width: 100%; border-top:solid 1px #000000; overflow:hidden;}

**Bovino** · 26/02/2013, 15h23

Quelle image ?

**twisel** · 26/02/2013, 15h26

une image qui est censée prendre toute la hauteur du conteneur! (en bleu dans l'exemple de mon premier message)

(j'ai mis mon code CSS dans le message précédent)

**rodolphebrd** · 26/02/2013, 15h32

Vous voulez placer une image en full-background?

Mise en page qui s'adapte à la fenêtre

CSS

Vue hybride

Discussions similaires

Partager

Partager