Footer en bas de page et responsive

Par Alexandre #lbac, il y a 11 ans


Les bases HTML/CSS

Bonsoir à tous,

Aujourd'hui j'ai un petit soucis CSS. Je me développe un petit site perso et j'ai trouvé une base de design qui me plaît bien. Je la refais à ma sauce et je bloque à un endroit au moment de tenter la "responsivité" du design.

J'ai ce footer :

.footer{ bottom: 0; left: 0; right: 0; position:absolute; background-color: #000; border-top: 2px solid #3faad9; display: table-row; }

Sur une fenêtre desktop aucun soucis ça marche sans problème, en revanche, lorsque je réduis ma fenêtre, le footer vient se superposer sur le contenu.

J'ai tenté un display:table-row dans mon footer et un display : table; dans mes propriétées html. J'ai également tenté

* {-moz-box-sizing: border-box; box-sizing: border-box;}

Mais rien n'y fait :/

4 réponses

TiimZero1, il y a 11 ans

Le problème est que tu fixe ton .footer : "bottom: 0; left: 0; right: 0;"

Il faudrait plutôt utilisé un media queries pour les moblies

Couss, il y a 11 ans

Le footer du thème n'est pas adapté au responsive ? peut être as tu oublier une class
Sinon comme le dit Tiim utilise les media queries

Alexandre #lbac, il y a 11 ans

J'ai remis l'ancien footer finalement

.footer{ bottom:0; left:0; right:0; position:relative; background-color: #000; padding: 50px 0px; border-top: 2px solid #3faad9; }

En enlevant toutes les modifications, et bizarrement l'ajout d'un block newsletter juste au dessus a résolu le problème ^^. J'ai par contre suivi vos conseils en mettant la position à relative ;)

Alexandre #lbac, il y a 11 ans

En fait non en relative le footer se place bien si la page a du contenu, en revanche en relative si la page est courte il ne reste pas en bas.

Du coup un media query plutôt :)