Weird Footer Comportement

Question

Je suis relativement nouveau à CSS, alors s'il vous plaît pardonnez-moi pour l'étrange gaffe. J'ai défini un pied de page pour avoir une position absolue, et il reste en bas pour toutes les pages sauf une sur mon site Web. ...> Le pied de page se comporte parfaitement ici, c'est-à-dire que sa position est collée au bas de l'écran quel que soit le contenu.

...> Alors que le bas de page se comporte anormalement, sa position n'est pas collée au bas de la page.

J'utilise la même classe de bas de page sur les deux pages, donc je ne suis pas sûr de ce qui ne va pas ici, mentionné ci-dessous -

.shell3-Footer { 
box-sizing: border-box; 
padding: 0.9375rem; 
border-top: 0.0625rem solid #dcdcdc; 
overflow: hidden; 
max-height:40px; 
width:100%; 
background-color:#f5f5f5; 
position:absolute; } 

Notez que si je change la position de fixe, le Le problème n'est que partiellement résolu, car j'ai besoin que le pied de page ne soit visible que lorsque nous faisons défiler vers le bas de la page. En outre, lorsque le position:fixed est utilisé, je ne suis pas en mesure d'afficher la flèche vers le bas de la barre de défilement - ce qui n'est pas comportement souhaité.

De plus, il y a un léger espace sous le pied de page défectueux que j'ai corrigé en y ajoutant bottom:0px. Est-ce que quelqu'un peut aider pourquoi la même classe de bas de page se comporterait différemment sur deux pages? Pensées?

Answer 1

Utilisez ces règles footer, ceux-ci peuvent aider ....

.shell3-Footer { 
    box-sizing: border-box; 
    padding: 0.9375rem; 
    border-top: 0.0625rem solid #dcdcdc; 
    overflow: hidden; 
    max-height:40px; 
    width:100%; 
    background-color:#f5f5f5; 
    position:absolute; 
    bottom: 0px !important; left: 0px !important; z-index: 10000 !important; /*added rule*/ 
} 

Answer 2

Essayez ceci:

body { 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
} 

/* Put this class on everything that is not the footer */ 
.content { 
    flex: 1 0 auto; 
} 

.shell3-Footer { 
    flex-shrink: 0; /* new stuff */ 
    width:100%; 
    background-color:#f5f5f5; 
    box-sizing: border-box; 
    padding: 0.9375rem; 
    border-top: 0.0625rem solid #dcdcdc; 
    overflow: hidden; 
}