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
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
A voir également:
- CSS 100% height avec header et footer...
- 100 mo en go ✓ - Forum Windows
- Formate pour taxer client 100€ ✓ - Forum Consommation & Internet
- Formaté mais pas de connexion Internet ? ✓ - Forum Matériel & Système
- 100 € en lettres - Forum Réseaux sociaux
- 100 gb en go ✓ - Forum Matériel & Système
5 réponses
Kopros
Messages postés
595
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
89
22 janv. 2010 à 10:52
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.
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
Messages postés
2
Date d'inscription
vendredi 22 janvier 2010
Statut
Membre
Dernière intervention
22 janvier 2010
22 janv. 2010 à 18:14
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??
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
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
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
css :
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..
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..
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
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 :
voila voila :)
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 :)
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
17
5 févr. 2010 à 01:02
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