28172 sujets

CSS et mise en forme, CSS3

Height 100% avec footer

Bonjour,
j'ai un problème avec l'affichage de mon site. Il devrait normalement prendre 100% de la hauteur de la page, mais ce n'est pas appliqué.
J'ai appliqué une height:100% à mes conteneurs, mais cela ne fonctionne que sous IE (oui je sais pour une fois que ca marche... Smiley cligne )

Pour voir le problème allez ici, il suffit de changer de page avec les onglets, et dès qu'il n'y a pas suffisament de contenu, les blocs ne prennent plus 100%, et la scrollbar disparait. Sous IE6 on peut voir que ca marche. Le problème n'est pas lié au javascript, ca me fait la même chose avec une page statique.

Voici la hiérarchie des blocs (très simplifié) : 
<body>
  <div id="conteneur">
     <div id="header"></div>
     <div id="content"></div>
     <p id="footer"></div>
  </div>
</body>

Voila le code principal css : 

body
{
	margin: 0px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #FFFFDD;
	height:100%;
}

div#conteneur
{
	width: 770px ;
	height:100%;
	margin: 0 auto ;
	text-align: left ;
	background: #fff url(../img/l_bord.gif) repeat-y left top ;
	
}

div#header
{
	height: 122px ;
	margin: 0 ;
	background: url(../background.JPG) no-repeat left top ;
}

div#content
{
	padding: 0 25px 0 25px ;
	/*height:100%;*/
}

p#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: center ;
	color: #000000;
}


Si vous connaissez une solution, merci d'avance Smiley smile
Bonjour,

1. Il te manque un html {height: 100%;}

2. Il faudrait utiliser min-height pour div#conteneur, afin de ne pas figer sa hauteur à celle d'un écran.
Merci beaucoup à vous deux, ca a effectivement réglé mon problème.
J'avais bien regardé plusieurs explications à la suite de mes recherches, mais je ne savais pas qu'on pouvait affecter une hauteur à 100%... Smiley confused

Maintenant, je voudrais juste régler un petit détail, dans l'onglet "Membres" par exemple, lorsque le texte est plus réduit, le bas de page remonte automatiquement.
Y aurait il un moyen de fixer le footer au bas de la page ? Avec un position absolute le résultat n'est pas correct.

Merci encore.
Bon en fait c'est plus compliqué que je pensais... Le problème est corrigé avec firefox, mais il apparait sous IE : le div ne descend pas jusqu'en bas de la page (le meme problème que la version en ligne avec firefox).

Voila le nouveau css : 

html 
{
	height:100%;
	overflow-y:scroll;
}

body
{
	margin: 0px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #FFFFDD;
	height:100%;
	min-height: 100%;
}

div#conteneur
{
	width: 770px ;
	margin: 0 auto ;
	text-align: left ;
	background: #fff url(../img/l_bord.gif) repeat-y left top ;
	min-height: 100%;
}
div#content
{
	padding: 0 25px 0 25px ;
}
div#footer
{
	margin: 0;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: center ;
	color: #000000;
}

En ajoutant height:100% à l'élément conteneur, ca marche sous IE, mais sous Firefox le div reste fixer à la hauteur de la fenetre, ce qui fait que si le contenu ne tiens pas dans la fenetre, il sort du fond blanc.

Si quelqu'un voit une solution, parce que la je m'arrache les cheveux depuis plusieurs jours, à essayer les différentes possibilités, mais aucune ne semble fonctionner Smiley decu
Salut kangaxx,
kangaxx a écrit :
En ajoutant height:100% à l'élément conteneur, ca marche sous IE, mais sous Firefox le div reste fixer à la hauteur de la fenetre
C'est tout l'intérêt des commentaires conditionnels Smiley cligne .

Cela permet d'utiliser min-height dans ta css et de préciser height pour IE
<!--[if lt IE 7]>
<style type="text/css">

/* Correction du min-height */
div#conteneur {
	height: xxx;
}

</style>
<![ endif]--> // supprimer l'espace avant endif...

A+
Merci, en fait je préférais utiliser une autre méthode, parce que j'aime pas trop devoir faire des cas en fonction des navigateurs, mais il semblerait que ce soit la seule solution.

J'ai aussi corrigé mon pied de page pour qu'il apparaisse dans tous les cas en bas de page en utilisant le tuto : http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html. Ca marche, le problème est que j'utilise du javascript qui modifie la taille du div 'content'. Sous IE des que je clique sur un onglet, le bottom : 0 est interprété comme devant mettre le bas de page au bas de la fenêtre visible, non au bas du contenu... ce qui fait une superposition du bas de page.

Y aurait-il un autre hack pour régler ce dernier problème ?
Tu as bien utilisé un height: 100% sur le conteneur global uniquement pour IE6? (Via un commentaire conditionnel qui va bien.)

Si oui, peut-on voir la page en ligne?
Oui tout à fait, j'ai bien mis le commentaire conditionnel.
Voila le résultat en ligne ici, si on va dans l'onglet forum, par ex, avec IE 6, on voit que c'est l'échec... Smiley decu
Modifié par kangaxx (27 Apr 2008 - 19:11)
Alors, tout le monde seche ?
Ou alors il n'y a pas un moyen de positionner le footer sans le absolute ?
Sujet clos
Aller à