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 : 1750
Taille : 53,2 Ko

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

Nom : capturedcran20130226133.png
Affichages : 1668
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?

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

dans le principe c'est ça, un full-background mais entre le header et le footer...

j'ai d'ailleurs parlé d'une image pour simplifier, mais en fait ça sera un javascript permettant d'afficher une image aléatoirement...

j'ai mis l'essai en ligne: http://www.kg-archi.fr/essai/index.html

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

Code css :

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
 
 html {
 	height:100%;
 }
  body {
    width: 100%;
	height:100%;
}
#conteneur {
	background-image:url(votre image);
	background-size:contain;
	-moz-background-size:contain;
	-webkit-background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	width:auto;
	height:100%;
}

Note : pour le full background ça fonctionne bien en positionnant le header et le footer en position absolue.

**twisel** · 26/02/2013, 16h29

j'ai essayé avec la méthode "css only - technique#2" du lien que tu as donné, et ça donne ça: http://www.kg-archi.fr/essai/index.html

pour le footer, c'est bon, mais pas pour le header... je comprends pas...

(ne tenez pas compte de la qualité des images, c'est juste un essai, hein!)

**rodolphebrd** · 26/02/2013, 16h46

Avec un z-index le header apparait.

**twisel** · 26/02/2013, 17h17

cool! merci!

bon après, c'est pas encore tout à fait ça puisque du coup l'image est coupée en haut et en bas respectivement par le header et le footer, mais ça s'en rapproche!

**Bovino** · 26/02/2013, 17h35

Avec un petit calc()...

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
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title>Page pleine</title>
	<style>
		html, body{
			height: 100%;
			margin: 0;
			padding: 0;
		}
		#header{
			height: 50px;
			background-color: blue;
		}
		#content{
			height: -webkit-calc(100% - 100px);
			height: calc(100% - 100px);
			background-color: gold;
			overflow: auto;
		}
		#footer{
			height: 50px;
			background-color: green;
		}
	</style>
	<script type="text/javascript">
	</script>
</head>
<body>
	<div id="header"></div>
	<div id="content">
		<img src="http://cyberzoide.developpez.com/misc/background56-800x600.jpg" style="height: 100%;width: 100%" />
	</div>
	<div id="footer"></div>
</body>
</html>

**rodolphebrd** · 26/02/2013, 17h40

Calc() : je ne connaissais pas.
Merci pour l'info.

**Bovino** · 26/02/2013, 17h44

Attention quand même... c'est pas totalement cross-browser...

**rodolphebrd** · 26/02/2013, 17h52

Oui j'ai checké immédiatement.

**Candygirl** · 26/02/2013, 18h18

Avec un positionnement absolut, IE7+, sauf pour le background-size qui est IE9+:

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
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title>Page pleine</title>
	<style>
                html, body{
                        height: 100%;
                        margin: 0;
                        padding: 0;
                        font-size:150%;
                }
                #header{
                        height: 50px;
                        background-color: blue;
                }
                #content{
                        position:absolute;
                        top:50px;bottom:50px;
                        width:100%;                     
                        overflow: auto;
                        background:url(http://fakeimg.pl/1500x1000/?text=FakeImage&font=lobster) no-repeat center fixed;
                        background-size:cover;
                }
                #footer{
                        position:absolute;
                        bottom:0;
                        width:100%;
                        height: 50px;
                        background-color: green;
                }
        </style>
	<script type="text/javascript">
        </script>
</head>
<body>
	<div id="header"></div>
	<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut purus eros. Sed condimentum ultricies posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam quis nibh ut lacus bibendum pulvinar. Integer venenatis, tortor ac placerat dictum, mi magna feugiat purus, et dapibus nunc massa eget ligula. Mauris tempor accumsan nulla, non tincidunt felis lobortis vitae.		
	</div>
	<div id="footer"></div>
</body>
</html>

**twisel** · 27/02/2013, 00h25

intéressant tout ça, merci beaucoup!

j'essaierai ça demain!

**twisel** · 27/02/2013, 13h41

@bovino: c'est presque ça, mais les proportions de l'image ne sont pas conservées.
la méthode calc() me semble être une petite usine à gaz, non?

@candygirl: l'image est rognée en haut et en bas, malgré le top et bottom à 50px, je n'arrive pas à comprendre comment ça se fait... du coup, pour le même résultat, ton code est plus simple que celui que j'ai en place actuellement!

**Candygirl** · 27/02/2013, 13h44

C'est parce que j'ai choisi un background-size:cover; qui couvre tout le canevas avec l'image, quite à la rogner (vu que tu disais vouloir le div toujours rempli pas l'image). Si tu préfères voir l'image en entier quite à ce qu'elle ne couvre pas l'entièreté de la zone tu peux utiliser à la place:

Code :

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

background-size:contain;

**Bovino** · 27/02/2013, 13h51

les proportions de l'image ne sont pas conservées

Ben... ça dépend des proportions de la zone dans laquelle tu veux l'afficher et des proportions initiales de l'images. Parce que si tu veux afficher en plein écran une image 4/3 par exemple sur un écran 16/9, oui, je te confirme que les proportions ne sont pas conservées, mais aussi qu'il est impossible de conserver les proportions en couvrant tout l'écran.
Ensuite, dans mon exemple, j'ai fixé les propriétés width et height à 100 % afin de couvrir l'ensemble de la zone, si tu ne fixes qu'une seule des propriétés, les proportions seront respectées.

la méthode calc() me semble être une petite usine à gaz, non?

Comment ça ?

Ca te semble compliqué à mettre en place ?