<section> de la hauteur de la page

**mangasource** · 05/02/2014, 12h24

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

Invité · 05/02/2014, 13h39

Bonjour,
une solution :

Code css :

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

1
2
3
4
5
6
7
8
#contain { display:table; }
#contain > header, 
#contain > nav, 
#contain > section, 
#contain > footer { display:table-row; }
#contain > header { height:90px; }
#contain > nav { height:45px; }
#contain > footer { height:30px; }

Autre solution :

"sticky footer"

**mangasource** · 05/02/2014, 14h10

Pas concluant .. Mais merci, j'ai saisi le truc

J'ai tenté de remplacer :

Code CSS :

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

1
2
3
4
5
6
7
section {
padding:20px;
padding-left:250px;
padding-right:250px;
background-color:rgba(204, 255, 255, 0.5);
font-family: 'Duru Sans', sans-serif;
}

Par ça :

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
section {
padding:20px;
padding-left:250px;
padding-right:250px;
background-color:rgba(204, 255, 255, 0.5);
font-family: 'Duru Sans', sans-serif;
 
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px;
 
}

Le problème est que la page est plus "haute" que l'écran et que cela créé un scroll :/

**NoSmoking** · 05/02/2014, 18h26

Bonjour,
j'y vais de ma contribution

Page "pleine" sur les navigateurs.

**mangasource** · 06/02/2014, 09h31

Après essai, et compréhension de ton code, le résultat attendu est différent :/

Le résultat adapté à mon code est le même, le pied de page est "trop bas" :/

**emixamQQ** · 06/02/2014, 10h03

Bonjour, as-tu essayais de mettre tes balises en position:absolute; et de mettre ton section en height:100%; ton footer a 10% avec un margin-bottom:10px; ?

A bientôt peux-être ! Emixam

**mangasource** · 06/02/2014, 10h42

Oui, mais non concluant.

le height:100%; ne mets pas le footer en bas de page, et le min-height:100%; le fait mais dépasse la hauteur de l'écran et engendre un scroll