CSS : footer qui ne prend pas toute la largeur

**xohama** · 13/01/2023, 21h28

Bonjour,
Je rencontre des difficultés lors de la création de mon site pour un projet université.
Le footer de mon site ne prend pas toute la largeur de l'écran.
Je lui ai pourtant appliqué une largeur de 100% (sachant que mon body a des marges nulles et pas de largeur définie)
Grosso modo dans mon CSS j'ai ça :

Code :

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
*{
margin 0;
padding 0;
box-sizing:border-box;
font-family:arial;
}
 
footer{
margin 0;
padding 50px;
background-color:black;
display:flex;
flex-wrap:wrap;
justify-content:space-around;
width:100%;
}

Si quelqu'un peut m'aider je suis preneur !

(je suis amateur en dev web)
Merci et bonne soirée

**ProgElecT** · 13/01/2023, 22h55

Salut

Il faut ajouter : entre la propriété et la valeur que tu lui donnes, donnez aussi l’unité à cette valeur.

Code :

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
*{
margin: 0px;
padding: 0px;
box-sizing:border-box;
font-family:arial;
}
*
footer{
margin: 0px;
padding: 50px;
background-color:black;
display:flex;
flex-wrap:wrap;
justify-content:space-around;
width:100%;
}

**xohama** · 14/01/2023, 12h35

Fait mais le problème persiste...

**ProgElecT** · 14/01/2023, 13h46

Salut

Peut être en ajoutant (si non déjà fait)

Code html :

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

1
2
3
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

**two3d** · 20/01/2023, 22h49

Si <footer> est dans une div, t'aura beau dire width:100% à <footer>, ce sera 100% de la div parente qui elle peut être, ne prend pas toute la largeur (voir avec l'inspecteur du navigateur pour aider)

Sans HTML, on peut pas savoir ici

**Olivier C** · 21/01/2023, 09h46

La dernière réponse est la bonne. Par contre, pour les réponses précédentes : les valeurs nulles n'ont pas besoin d'unités (sauf dans de rares cas, pour des propriétés CSS très spécifiques ; par exemple, line-height se comportera différemment).

CSS : footer qui ne prend pas toute la largeur

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager