[Résolu] Footer

footer{
	padding-top: 10%;
	margin-top: 20%;
	background-color: #282923;
	height: 30vh;
	width: 100%;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;


}

/*.footerp{
	position: absolute;
	text-align: center;
	background-color: blue;
	font-size: 3vh;
	/*margin-right: 20%;
}*/



.contenaire{
	background-color: red;
	margin-right: 75%;
	height: 35vh;
	width: 20vw;
	margin-bottom: 20%;
	margin-top:10%;
}

Yordi a écrit :
Bonjour, 2 choses :
- Comment penses-tu que ton footer va se coller en bas, je veux dire avec quelle(s) propriété(s) de ta liste ? (je peux te donner des solutions, mais autant essayer de partir sur ce que tu as en tête)
- Fais attention en fixant des height (éviter si possible), et en mixant vw et %, ce n'est peut-être pas grave maintenant mais lorsque tu auras des scrollbars, ce sera plus ennuyant. Autant partir que sur des % je pense dans ce cas-ci.

Yordi a écrit :
Bonjour, 2 choses :
- Comment penses-tu que ton footer va se coller en bas, je veux dire avec quelle(s) propriété(s) de ta liste ? (je peux te donner des solutions, mais autant essayer de partir sur ce que tu as en tête)
- Fais attention en fixant des height (éviter si possible), et en mixant vw et %, ce n'est peut-être pas grave maintenant mais lorsque tu auras des scrollbars, ce sera plus ennuyant. Autant partir que sur des % je pense dans ce cas-ci.

Yordi a écrit :
Ok, tu as un display flex sur ton body et un flex-direction, cela va simplement dire que tes éléments vont se stacker les un au dessus des autres.

Soit en jouant avec flex-grow, tu pourras (il me semble le plus utilisé pour ton cas):
- avec une valeur à 1, donner plus de place a cet élément (et pousser les autres)
- avec une valeur à 0, donner l'espace requis pour cette élément

Soit dans un environnement flex, tu peux facilement jouer avec des margin auto pour pousser les élements…

Soit avec un align-item: space-between (ou justify-content, je ne retiens jamais les sens) qui te permettra de bouger tes éléments.

Autre chose importante ! c'est que ton container flex (body dans ce cas), est un élément comme un autre et ne fait pas 100% de ta fenêtre (normal quand on y pense). Une chose simple pour contourner cela, est de lui appliquer un min-height: 100vh.