[HTML/CSS] contenu pleine pageFermé

Question

Bonjour,

j'ai une page web actuellement séparée en 3 partie (div): 

header, main et footer, le tout englobé dans un div wrapper: 
 ________
| Header |
| main    |
| footer   |
|            |
|_______|

Cependant, je souhaiterais que le main occupe tout l'espace entre header et body quelque soit la résolution de l'écran de l'utilisateur:
 ________
| Header |
|            |
|   main  |
|            |
|_footer_|

(css:

#wrapper{ min-height : 100%; position: relative; border: 1px solid #CCC; padding: 0 0 10px; margin : auto; }
#header{ background: #8fbfe7; border-bottom: 5px solid #5c9cd2; padding: 0 0 15px; }
#main{min-height : 100%; padding:20px; z-index: 0; *z-index:-1; background:#FFF; border:1px solid #CCC; overflow : auto;}
#footer{margin:10px auto 0px;width:960px; background:#FFF; padding-bottom:0px; border:1px solid #CCC;  }

)

Auriez vous une solution ?

Cordialement,

Ksa

cheese42 · Answer

slt:::

main {
       with: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

ca ne marche pas ???? @++........

M@dien · Answer

Bonjour,

normalement le min-height:100% ou height:100% ne fonctionnent pas en xHTML. ça fonctionnait en HTML 4.0 mais pour des raisons obscures le W3C a décidé de désactiver les hauteurs en %.

Pour la solution, malheureusement, il n'y a pas de solution miracle en CSS.

Donc soit il faut faire un design unifié, comme le préconiserait le W3C, soit il faut ruser.

Avec l'explosion des résolutions écrans, avec des écrans de bureau immenses et des inconditionnels qui surfent avec leur téléphone, psp, wii, etc..., il faut se dire que l'on ne fait pas forcément des amis si on fait toujours par rapport à l'écran. le fait de vouloir mettre le footer en bas est problématique pour les très grands écrans, où des liens sont totalement détachés du contenu du site. D'où la volonté du W3C d'avoir des pages xHTML en flux unique, c'est à dire sans décrochement entre le contenu et le pied de page.

Après ce petit speech, je te propose tout de même quelque chose de simple:
Mettre le footer en "position:fixed; bottom:0px;".
Comme celà, le footer sera toujours en bas. le hic, c'est qu'il sera également toujours visible.

Mettre le footer en "position: absolute; bottom:0px;" ne fonctionne pas correctement en xHTML dans le sens où le footer sera flottant au dessus du texte si celui-ci est trop long.

Enfin, une autre possibilité qui m'agace, car je trouve que ça fait bricolage face à la puissance du CSS:
définir le min-height du div main par javascript, selon la taille du navigateur.
Mais attention, certains désactivent le javascript donc méfiance...

[HTML/CSS] contenu pleine page

2 réponses

Discussions similaires

Newsletters