CSS 100% height avec header et footer...
llevante
Messages postés
2
Date d'inscription
Statut
Membre
Dernière intervention
-
nobie-cs Messages postés 155 Date d'inscription Statut Membre Dernière intervention -
nobie-cs Messages postés 155 Date d'inscription Statut Membre Dernière intervention -
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:
En espérant avoir des réponses, je vous remercie d'avance.
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.
A voir également:
- CSS 100% height avec header et footer...
- 100 mb en mo ✓ - Forum Matériel & Système
- Formate pour taxer client 100€ - Forum PDF
- 100 mo en go ✓ - Forum Mobile
- Arnaque transcash sur Leboncoin. ✓ - Forum Consommation & Internet
- Convertir MB ---> GO ✓ - Forum Mail
5 réponses
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.
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??
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..
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