Footer en bas de page et responsive

Alexandre #lbac
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
Réponse acceptée

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

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
Auteur

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
Auteur

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 :)