Problème positionnement Footer

[Résolu/Fermé]
Signaler
-
 M0nk -
Bonjour,

Je suis face à un casse tête en CSS que je n'arrive pas à solutionner.
C'est pourquoi je fais appel à vous.
Si ma page n'occupe pas tout l'écran je souhaiterai que mon footer soit tout de même positionner en bas de l'écran.
Si ma page est plus haute que l'écran (scroll vertical) je souhaiterai que le footer soit en bas de ma page après mon contenu. Accessible donc en scrollant vers le bas.

Voici mon architecture :

<div id="wrap">
        <div id="header"></div>
        <div id="menu"></div>
        <div id="content"></div>
        <div id="footer"></div>
</div>


Voici mes styles :
#wrap {
    position: relative;
    margin: 0px auto;
    width: 900px;
    background: none repeat scroll 0% 0% #FFF;
    height: auto !important;
    min-height: 100%;
}
#content {
    padding: 0px 10px 25px;
}
#footer {
    position: absolute;
    left: 0px;
    background-position: 50% 100%;
    height: 18px !important;
    font-size: 7pt;
    text-align: center;
    line-height: 18px;
    width: 100%;
    bottom: 0px;
}


Ce qui se passe actuellement :
Quand la page n'occupe pas tout l'écran, le footer est bien en bas, aucun souci.
Quand le contenu est plus haut que l'écran, le footer est en bas de l'écran, et non à la fin de mon contenu, et lorsque je scroll, le footer vient aussi et reste positionné au milieu de mon contenu.

Help please.

1 réponse

Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
665
Salut
ce que tu veux faire n'est pas possible avec css
Pour le footer
si le contenu est moins grand que la fenetre position: fixed ou absolute
si le contenu est plus grand que la fenetre position:relative
donc tu as 2 attributs css différents
tu pourrais faire ca avec jquery par exemple avec la fonction .height()
tu compare (window).height() avec ("#wrap").height() tu appliques un css différent suivant cette comparaison
https://api.jquery.com/height/
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Merci beaucoup pour ton aide, j'ai suivi ton conseil et ça fonctionne parfaitement bien.
Si cela peut servir à quelqu'un d'autre voici le code.
Dans mon fichier javascript :
$(document).ready(function () {
    if (parseInt($(window).height()) == parseInt($("#wrap").height()))
    {
        $("#footer").removeClass("footer-max");
        $("#footer").addClass("footer-min");
    }
    else
    {
        $("#footer").removeClass("footer-min");
        $("#footer").addClass("footer-max");
    }
});


Dans ma feuille de style :
.footer-min {
	position: absolute;
	background-position: 50% 100%!important;
	height: 18px !important;
	font-size: 7pt;
	text-align: center;
	line-height: 18px;
	width: 100%;
	bottom: 0px;
}
.footer-max {
	position: relative;
	background-position: 50% 100%!important;
	height: 18px !important;
	font-size: 7pt;
	text-align: center;
	line-height: 18px;
	width: 100%;
	float: left;
}