Rechercher : dans
Par :

[HTML/CSS] contenu pleine page

Dernière réponse le 4 sep 2009 à 11:42:10 ksa, le 4 sep 2009 à 00:40:03 
 Signaler ce message aux modérateurs

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

Meilleures réponses pour « [HTML/CSS] contenu pleine page » dans :
Créer un site beau, dynamique et respectueux des standards VoirVoici une liste de liens qui vous aideront à mieux exploiter les standards (HTML, CSS, DOM...) pour créer des sites plus beaux, plus dynamiques et plus respectueux des standards. A la fin de cette page, il y a également une liste de...
Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...

1

cheese42, le 4 sep 2009 à 10:46:26

Slt:::

main {
with: 100%;
height: 100%;
margin: 0;
padding: 0;
}

ca ne marche pas ???? @++........ ------------------------------------------------------------­----------
/  La vie ne vaut rien mais rien ne vaut la vie !!!!!  /
------------------------------------------------------------­----------

Répondre à cheese42

2

 M@dien, le 4 sep 2009 à 11:42:10

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... Pour plus de rapidité, expliquez bien votre problème, cela évitera des échanges inutiles.
Si vous ne prenez pas le temps d'écrire en français correct, on ne prendra peut-être pas le temps de vous répondre...
Pensez-y.

Répondre à M@dien