Pied de page en bas

Question

Je suis coincé avec un pied de page.

J'ai ce code - https://jsfiddle.net/annaolsh/pLzv5sg5/13/

#footer { 
    right: 0; 
    bottom: 0; 
    left: 0; 
    padding: 1rem; 
    background-color: orange; 
    text-align: center; 
} 

Sur un petit écran la barre de navigation est affiché en haut et en bas de page est sur le fond - c'est exact.

Mais sur les grands écrans lorsque la barre de navigation est affichée verticalement sur le côté gauche, le pied de page disparaît. Impossible de comprendre comment afficher le pied de page. Il n'a pas besoin d'être collant: l'utilisateur doit défiler vers le bas et le voir (comme sur les petits écrans). La largeur du pied de page doit correspondre à 100% de la taille de l'écran.

Merci!

Answer 1

En position d'extrait de code donné est désactivé. Il y a du travail à faire avec la position de chaque élément sur votre page. Le seul nœud ayant un jeu de position est le menu gauche et il est réparé.

La solution la plus simple serait de jouer avec css suivant:

#footer { 
    position: relative; 
    clear:both; 
    padding: 1rem; 
    background-color: orange; 
    text-align: center; 
} 

Supprimer gauche, en bas et à droite. Il suffit d'ajouter la position relative et effacer: les deux.

DEMO: https://jsfiddle.net/pLzv5sg5/14/

Answer 2

Ajouter code pied à l'intérieur wrapper contenu i.e. conteneur fluide après utilisation du code CSS pour le pied de page:

#footer { 
padding: 1rem; 
background-color: orange; 
text-align: center; 
} 

https://jsfiddle.net/rppmvgeo/