28172 sujets

CSS et mise en forme, CSS3

[Résolu] Foot en bas de page avec Flex ; j'aimerai comprendre ce qui v

Bonsoir,
Je coince sur comment garder un pied de page en bas avec Flex. J'essaye un peu de tout (tutos, expérimentation perso...) , mais même en copiant-collant les codes conseillés, je n'arrive à rien et je ne comprends pas ce qui coince.
Un regard extérieur trouvera sans doute en quelques secondes...


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-FR">
<head>
	<meta charset="utf-8" />
	<title>{% if title is defined %}{{ title }} - {% endif %}{{ siteName }}</title>
	<link rel="home" href="{{ siteUrl }}" />

	<style type="text/css">
		body { background: #ffffff; display: flex; min-height: 100vh; height: 100vh; flex-direction: column; }
		#container { margin: 0 auto; width: 960px; }
		#header { background-image: url("/assets/templates/header.png"); height: 150px; }
		#nav { text-align: center; }
		#content { border-bottom: 1px solid; border-top: 1px solid; padding: 10px 0px; flex: 1 0 auto; }
		#footer { text-align: center; }
	</style>
</head>

<body>
	<div id="container">
		<header id="header">
		</header>
		<nav id="nav">
			Texte
		</nav>
		<main id="content" role="main">
			Texte
		</main>
		<footer id="footer">
			Texte
		</footer>
	</div>
</body>
</html>
Bonsoir.

Ce qui coince, c'est qu'il n'y a rien qui force le container à rester en bas.

flex-direction: column;


La colonne va de haut en bas.

On peut utiliser :

flex-direction: column-reverse;

pour aller de bas en haut.

Smiley smile
Moi au contraire j'utiliserais flex-direction: column...

Je n'ai pas le temps ce soir d'analyser votre code, voici donc le mien (dont je me sers souvent à titre d'exemple pour le forum) : CodePen
Administrateur
Hello,

Le principal problème est que tu as déclaré body en display: flex mais ce n'est pas lui le parent direct des flex-items, c'est ton div id="container". C'est donc lui qui doit disposer des propriétés de parent flexbox Smiley cligne 

body { 
  margin: 0; 
  min-height: 100vh; 
}
#container { 
  margin: 0 auto; 
  width: 960px;
  min-height: 100vh;
  display: flex;   
  flex-direction: column;
}


Note : ton container n'est sans doute pas nécessaire, rien ne t'empêche de le supprimer et de tout appliquer sur body.
Modifié par Raphael (27 Aug 2017 - 22:41)
Meilleure solution
Merci à tous pour vos réponses rapides et formatrices. Smiley smile

J'ai mis à jour le code en me basant sur la réponse de Raphael, et cela fonctionne enfin ! \^o^/


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-FR">
<head>
	<meta charset="utf-8" />
	<title>{% if title is defined %}{{ title }} - {% endif %}{{ siteName }}</title>
	<link rel="home" href="{{ siteUrl }}" />

	<style type="text/css">
		body { background: #ffffff; margin: 0; min-height: 100vh; }
		#container { display: flex; flex-direction: column; min-height: 100vh; margin: 0 auto; width: 960px; }
		#header { background-image: url("/assets/templates/header.png"); height: 150px; }
		#nav { text-align: center; }
		#content { border-bottom: 1px solid; border-top: 1px solid; flex: 1 0 auto; padding: 10px 0px; }
		#footer { text-align: center; }
	</style>
</head>

<body>
	<div id="container">
		<header id="header">
		</header>
		<nav id="nav">
			Texte
		</nav>
		<main id="content" role="main">
			{% block content %}
			{% endblock %}
		</main>
		<footer id="footer">
			Texte
		</footer>
	</div>
</body>
</html>
Sujet clos
Aller à