Bonjour,

Je bloque actuellement sur la mise en place d'un site qui s'adapte à la "hauteur de l'écran".

Je voudrais que ma balise <section> prenne toute la hauteur en prenant compte du footer (qu'elle ne passe pas par dessus/dessous).

Voici mon code HTML :
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
 
<html>
<head>
	<title>Informatique 34</title>
	<link rel="stylesheet" href="style.css">
	<!-- FONTS -->
	<link href='http://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Duru+Sans' rel='stylesheet' type='text/css'>
	<!-- FONTS -->
</head>
<body>
<div id="contain">
	<header></header>
	<nav>
		<ul>
			<li><a href="">Prestations</a></li>
			<li><a href="">Tarifs</a></li>
			<li><a href="">Contact</a></li>
		</ul>
	</nav>
	<section>
	<h1>Prestations</h1>
		<div id=""><p>lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. </p></div>
	</section>
	<footer>Informatique 34 &copy; 2014 - Quentin REY</footer>
	</div>
</body>
</html>

Et mon code CSS :

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
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
/* GENERAL */
p, li, ul, h1, h2, h3, h4, h5, h6 {
padding : 0;
margin : 0;
}
html, body {
margin: 0px;
   padding: 0px;
   outline: 0px;
   height: 100%;
   }
body {
background-image : url("http://subtlepatterns.com/patterns/pixel_weave.png");
}
#contain {
height: 100%;
width: 100%;
margin : 0 auto;
}
/* GENERAL */
 
/* HEADER */
header {
background : url();
background-color:rgba(102, 204, 204, 0.5);
height : 200px;
}
/* HEADER */
 
/* NAV */
nav {
padding:10px;
background-color:rgba(153, 255, 255, 0.5);
text-align: center;
font-size:1.5em;
font-family: 'Hammersmith One', sans-serif;
}
nav a {
color:rgba(000,000,000,0.6);
text-decoration:none;	
transition : all 0.2s 0s ease-in;
border-bottom:0px solid rgba(102, 120, 102,0);;
}
nav a:hover {
color:rgba(000,000,000,1);
border-bottom:4px solid #33CCCC;
}
nav li {
display : inline-block;
text-transform : uppercase;
font-weight : bold;
padding-left : 20px;
padding-right : 20px;
}
/* NAV */
 
/* SECTION */
section {
padding:20px;
background-color:rgba(204, 255, 255, 0.5);
font-family: 'Duru Sans', sans-serif;
}
/* SECTION */
 
/* FOOTER */
footer {
padding:10px;
background-color:rgba(102, 204, 204, 0.5);
text-align:center;
font-family: 'Duru Sans', sans-serif;
font-size:0.8em;
}
/* FOOTER */

Quelle solution me conseilleriez-vous ?

Merci par avance,
mangasource