CSS 100% height avec header et footer... Fermé

Question

Bonjour à tous,

Je suis designer graphique et je suis en ce moment en train de développer un site pour une maison de disque qui va débuter très prochainement au Portugal. 

J'ai une question a propos d'un problème que je n'arrive pas a résoudre malgré 2 jours de persistance.
Voilà, j'ai suivi ce code (https://peterned.home.xs4all.nl/examples/csslayout1.html afin que le footer se retrouve dans le bas de la page dans le cas de ne pas avoir un contenu suffisant pour créer une barre de scroll. 

Cependant je désire que quand le contenu est suffisamment long, le footer se trouve au fond de la page (donc non visible).
Dans mon cas quand j'ouvre la page, le footer est visible et quand je scrolle vers le bas, celui-ci reste au même endroit dans la page. C'est-à-dire qu'il monte avec le reste du contenu, en plein milieu d'une image, alors qu'ils devrait se trouver sous celle-ci...

Pour plus de facilité de compréhension je peux poster mes fichiers html et css afin de recevoir une aide. (si je trouve comment faire, car c'est la première fois que j'utilise ce forum)

Excusez mon explication, mais j'ai du mal a mettre mon problème sur papier.


Je poste tout de même mon code css ici:

html,body {
	margin:0;
	padding:0;
	height:100%;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height:130%;

	color:#361916;
	background:#361916;
	
}

div#container {
	position:relative; /* needed for footer positioning*/
	margin:0 auto; /* center, not in IE5 */
	width:900px;
	background:#FFF;;
	
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/

	min-height:100%; /* real browsers */
}

div#header {
	background-color:#FFF;
	width:100%;
	float:left;
	border-bottom:solid 1px;
	border-bottom-color:#f06422;
	}
	
	div#header p {
		font-style:italic;
		font-size:1.1em;
		margin:0;
	}

div#content {
	position:relative;
	padding:27px 40px 0px; /* bottom padding for footer */
	clear:both;
	background-color:#FFF;

	
}
	

div#footer {
	position:absolute;
	clear:left;
	width:100%;
	bottom:0; /* stick to bottom */
	height:29px;
	padding-top:20px;
	margin-top:20px;
	background-color:#FFF;
	border-top: solid 1px;
	border-top-color:#f06422;
	left:0; 
    right:0; 
}



En espérant avoir des réponses, je vous remercie d'avance.

Kopros · Answer

J'ai exactement le même souci ! J'ai apporté une "solution" mais c'est pas propre (pour ne pas dire que ça pue carrément).
Dans div#footer, j'ai remplacé 
position:absolute;
par
position:relative;

Le footer se trouvera sous le contenu. Le souci, c'est quand le contenu est pauvre, le footer ne sera pas en bas de la page, mais sous le contenu. Donc si le contenu s'arrête au milieu de la page, le footer sera juste en dessous, au milieu et pas en bas.

Si quelqu'un a une meilleure idée...

EDIT : d'après ce que j'ai vu, la solution se trouve dans le javascript. J'ai testé plusieurs scripts dont un ou deux de ma création, j'ai rien trouvé qui fonctionne.

llevante · Answer

Salut Kopros,

Je viens de découvrir la raison du mauvais placement du footer. Je travaille sur le sujet en ce moment. Basiquement le mauvais positionnement est du au FLOAT:left; infligé au CONTENT et au CLEAR:left/both;  

Cependant je ne vois pas trop de quelle manière je peux effectuer mon layout sans utiliser ces propriétés...

Quelqu'un peux suggérer une idée??

jona303 · Answer

Effectivement c'est un calvaire css, j'ai déjà eu le même problème, depuis j'ai arrêté ce genre de footer.. ^^ par contre c'est vrai qu'en jquery il devrait y avoir moyen de faire quelque chose,.. Je viens de tester ça (depuis cette histoire j'ai appris des choses :) ) et ça a l'air de marcher (avec jquery) Je sais c'est pas propre c'est juste un test en vitesse

css : body {margin:0;padding:0; } #footer {position:absolute;bottom:0;background:#444444;height:30px; } #content {display:block;height:1000px;background:#543576; } si dans le css je donne 100px en height à #content, le footer colle en bas, si je donne 1000 (ça dépasse largement de mon ecran 1600*900), le content va se placer en dessous de #content..

jona303 · Answer

Pour ceux que ça intéresse, je viens de tester le script pour un client,..
Et pour que quand les gens resizent leur fenetre ca reste bon il faut aussi faire :

$(window).resize(function(){
if ($(document).height()>$(window).height()){
		$('#footer').css({position:'relative'});
	}else {
$('#footer').css({position:'absolute'});
}

});

voila voila :)

nobie-cs · Answer

si tu  supprime 	position:absolute;	clear:left; du footer  et tu mette son code html en dessus du content et tu supprime position:relative; tu container , sa peut marche

CSS 100% height avec header et footer...

5 réponses

Discussions similaires