28172 sujets

CSS et mise en forme, CSS3

[Résolu] Footer

Bonjour , mon footer ne veut pas ce coller en bas de ma page.

Une idée ?

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%;
}
Modérateur
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.
upload/1602664465-81315-grrr.jpg
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.



Salut, d'accord

Alors j'ai appliquer un display: flex et flex-direction: column; a mon body
tu veut voir mon code ?

J'ai mis un background à tout mes élément mais rien ne gène apparemment ..
Modifié par freeeeezi (14 Oct 2020 - 10:34)
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.



alors, j'ai bidouillé des truc avec flex et mtn ça marche ... Smiley smile
Modérateur
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.
Meilleure solution
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.




Merci énormément !

j'ai utilisé un space-between

merci
Sujet clos
Aller à