28172 sujets

CSS et mise en forme, CSS3

Sticky Footer mal positionné / scroll inutile. [Résolu]

Bonjour à tous.

Pour un site internet dont le contenu des pages ne remplit pas forcément toujours toute la hauteur de la fenêtre du navigateur, j'aimerais utiliser le trick bien connu du sticky footer : http://www.cssstickyfooter.com/using-sticky-footer-code.html

Le problème c'est que je me retrouve ensuite avec un footer qui se positionne trop bas sur ces pages, obligé de scroller, ce qui ne me convient pas du tout.

J'ai lu un peu partout que ce genre de bugs étaient du à des margin dans les différents div wrapper, hors j'ai tout remplacé par des padding, mais rien n'y fait, j'ai toujours ce bug.

Voici la structure principale de mon site :


<html>
    <body>
        <div id="page-wrap">
            <div class="clearfix">
                <div id="leftcol">
                    <!-- menu flottant à gauche -->
                </div>
                <div id="rightcol">
                    <!-- contenu flottant à gauche -->
                </div>
            </div>
        </div>
        <div id="footer">
        </div>
    </body>
</html>


Et voici les bases du css :


* {
	margin: 0;
	padding: 0;
}

html, body, #page-wrap {
	height: 100%;
	position: relative;
}

body > #page-wrap {
	min-height: 100%;
	height: auto;
	padding-bottom: 150px;
	position: relative;
	width: 980px;
	margin: 0 auto;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
	padding: 20px 0;
}

/* Hides from IE-mac \*/

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

/* End hide from IE-mac */

#leftcol {
	width: 180px;
	float: left;
	overflow: auto;
}

#rightcol {
	width: 800px;
	float: left;
	overflow: auto;
}

#footer {
	padding: 5px 0;
	overflow: auto;
	width: 100%;
	clear: both;
	position: relative;
	height: 140px;
	margin-top: -150px;
}


Avez-vous déjà rencontré ce problème ? Une idée ? Je m'arrache un peu les cheveux sur cette affaire et j'y perds un temps fou.

Si vous avez besoin de plus de détails, n'hésitez pas à m'en demander.

Merci d'avance.
Modifié par Ploum (08 Jun 2012 - 10:23)
Bonjour,

C'était presque ça. Ce padding-bottom est obligatoire pour "réserver" de l'espace au cas où le contenu dépasserait la hauteur de la fenêtre.

Par contre, il était mal placé, il doit être placé dans le div contenu dans le wrapper de hauteur 100%. Je l'ai mis pour la div .clearfix et ça marche. Bref.

Merci de m'avoir mis sur la bonne voie en tout les cas !
Sujet clos
Aller à