Le footer

Le footer doit venir calé en bas de la fenêtre, il sera noir et étendu sur toute la largeur de la fenêtre du navigateur.

Organiser le footer et structurer la page verticalement

Propriétés de bases du footer
Dans un premier temps, on lui attribue une largeur de 100%, une hauteur de 80px et une couleur de fond noire.
```
footer {
	width: 100%;
	height: 80px;
	background: #000;
}
```
Organiser la liste des icones RS
Sur le même principe que les éléments de navigation, on va les répartir horizontalement avec la propriété display:flex;
```
ul#reseaux-sociaux {
	display: flex;
	justify-content: center;
}
```
Figure: Répartition horizontale avec display:flex

Marges intérieures autour des icônes

ul#reseaux-sociaux li {
	padding: 0.5em  0.5em 0 0.5em;
}

Positionnement de "Mentions légales"

footer p {
	padding-top: 0.5em;
	text-align: center;
}

Traitement du lien

footer p a {
	font-size: 0.8em;
	color:#FFF;
	text-decoration: none;
}

Structurer verticalement la page
Voici le résultat actuel : le pied de page reste positionné dans le flux. Si celui-ci n'est pas important, le footer remonte.

La page doit être corrigée. On ne veut pas que le footer soit en position fixe ou absolute car il va recouvrir le bas du main.

Figure: Le footer recouvre l'information et ce n'est pas la solution.

Pour le body, on utilise la propriété min-height avec la valeur 100vh (vertical height) pour forcer l'étirement de la page sur 100% de la verticalité. On se sert d'une propriété display avec la valeur flex pour gérer les contenus enfants. On rajoute la propriété flex-direction: column pour donner un sens vertical à cette organisation.
```
min-height: 100vh;
display: flex; /*body est le parent qui va gérer la répartition des enfants verticalement*/
flex-direction: column; /*par défaut c'est en ligne (row)*/
```

Indiquer l'élément qui s'étire

On choisit l'élément enfant de body qui va s'étirer verticalement dans la fenêtre. Ce sera le main.

main {
	flex: 1 1 auto;
	width: 960px;
	margin: 0 auto;
}
/* 1 pour flex-grow (grossissement - 1 pour flex-shrink (rétrécissement) 
- auto pour flex-basis (pourcentage partagé avec les autres items enfants et en fonction de la surface totale.
 La valeur auto spécifie que la dimension de l'élément n'est pas modifiée s'il en avait une */