CSS 100% height avec header et footer...

Fermé
llevante
Messages postés
2
Date d'inscription
vendredi 22 janvier 2010
Statut
Membre
Dernière intervention
22 janvier 2010
- 22 janv. 2010 à 06:22
nobie-cs
Messages postés
155
Date d'inscription
samedi 21 novembre 2009
Statut
Membre
Dernière intervention
15 mai 2010
- 5 févr. 2010 à 01:02
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.

5 réponses

Kopros
Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
86
22 janv. 2010 à 10:52
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.
1
llevante
Messages postés
2
Date d'inscription
vendredi 22 janvier 2010
Statut
Membre
Dernière intervention
22 janvier 2010

22 janv. 2010 à 18:14
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??
0
jona303
Messages postés
369
Date d'inscription
dimanche 25 janvier 2009
Statut
Membre
Dernière intervention
28 janvier 2013
28
22 janv. 2010 à 21:35
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
<html>
<head>
<style type="text/css" title="ecoplaster" media="screen">
		<!--
			@import "style.css";
		-->
	</style>
<script language="javascript" type="text/javascript" src="a_jquery-1.3.1.min.js"></script>
<script>
$('document').ready(function(){
	alert($(this).height()+'/'+$(window).height());
	if ($(this).height()>$(window).height()){
		$('#footer').css({position:'relative'});
	}
});
</script>
</head>
<body>
<div id="content">

</div>
<div id="footer">
toto
</div>
</body>
</html>


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..

0
jona303
Messages postés
369
Date d'inscription
dimanche 25 janvier 2009
Statut
Membre
Dernière intervention
28 janvier 2013
28
4 févr. 2010 à 12:07
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 :)
0
Ca marche très bien en effet! Merci!

Par contre, j'ai viré la ligne alert($(this).height()+'/'+$(window).height()); qui n'est là qu'à titre informatif ...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
nobie-cs
Messages postés
155
Date d'inscription
samedi 21 novembre 2009
Statut
Membre
Dernière intervention
15 mai 2010
16
5 févr. 2010 à 01:02
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
0