CSS - Comment épingler le pied de page au bas de la page

Question

Je travaille sur un petit projet personnel pour essayer de réapprendre le HTML & CSS et j'ai quelques problèmes avec épingler le bas de mon site au bas de la page. site peut être trouvé here.

J'ai essayé la recherche en ligne et a trouvé que mon CSS pied de page doit comporter les éléments suivants:

bottom: 0; 
position: fixed; 

Cela ne l'épingler au fond, mais il dépasse la largeur de mon récipient et ne semble pas juste. Quelqu'un peut-il aider?

Merci.

Answer 1

Vous pouvez essayer de jouer avec la largeur du pied de page pour voir ce qui convient. par exemple.

width: 100%; 
bottom: 0; 
position: fixed; 

Answer 2

Vous devez comprendre comment position: fixe; travaille. Il ignore tout élément environnant. c'est à dire. Un élément de position fixe est positionné par rapport au port d'affichage ou à la fenêtre du navigateur elle-même.

Vos .container styles sont:

margin: auto; 
width: 75%; 

donc appliquer ce aussi au pied de page:

footer { 
    bottom: 0; 
    margin: auto; 
    width: 75%; 
    position: fixed; 
    height: 300px; 
    background: #2D2D2D; 
    border-top: 12px solid #3E3E3E; 
} 

Answer 3

essayez ceci:

body { 
    line-height: 1; 
    height: 100%; 
    display: table; 
    width: 100%; 
} 

footer { 
    display: table-row; 
    height: 1px; 
    width: 100%; 
} 

footer:before, footer:after { 
    content: " "; 
    display: table; 
} 

footer:after { 
    clear: both; 
}