28172 sujets

CSS et mise en forme, CSS3

Conteneur 100% hauteur ecran

salut à tous Smiley smile
je voudrai savoir comment faire pour avoir un conteneur à 100% de la hauteur de l'ecran... Smiley sweatdrop

En claire, je voudrai faire en sorte que ma div conteneur, prenne toute la hauteur de l'ecran et que ma page soit à l'interieur...
<html>
<head>
<style type="text/css">
body {
background-image : url(../back.jpg);
background-attachment : fixed;
margin: 0;
padding: 0;
border: 0;
}
#sfx {
background-image : url(../back2.gif);
background-repeat: no-repeat;
background-position: left bottom;
background-attachment : fixed;
height: 100%;
padding: 10px 0 10px 0;
margin: 0;
}
...
...
</style>
</head>
<body>
   <div id="conteneur">
      <div id="corps_page">blablabla blablabla blabla...</div>
   </div>
</body>
</html>


mon problème est que ma div sfx s'arrête 10px en dessous du corps_page (padding precisé dans sfx pour bottom). pour une page dont corp_page à une hauteur superieur à la hauteur de l'ecran (scroll), sa va encore, mais pour une page dont le corp_page est inferieur à la hauteur ecran, j'ai mon image de sfx qui ce coupe Smiley sweatdrop

en gros le conteneur sfx s'étant en hauteur suivant corp_page et ne tient pas compte de height: 100%.

se que je voudrai c'est que sfx fasse toute la hauteur de l'ecran (même si on passe en fullscreen) Smiley murf

si quelqu'un peu m'aider. Merci d'avance Smiley cligne
ok j'ai regarder du coté de tout ces p'tits lien bien sympa... j'avais deja fait quelques essai du genre. Smiley langue

j'ai essayer de rajouter ceci au CSS:
html {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
}
body {
background-image : url(http://www.beroots-web.loc/enfant_inca2back.jpg);
background-attachment : fixed;
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
}
#sfx {
background-image : url(http://www.beroots-web.loc/enfant_inca2.png);
background-repeat: no-repeat;
background-position: left bottom;
background-attachment : fixed;
min-height: 100%;
padding: 10px 0 0 0;
margin: 0;
border: 0;
}

resultat: c'est ok sous navigateur moderne (FF IE7 Opera...). Mais sous IE<7, je doit remplacer le min-height par height: 100% (presque ok sauf que maintenant sous IE<7, j'ai le background qui suit la hauteur de div car background-position est à left bottom)

si quelqu'un à une idée à aporter à ma feuille de style corrective IE<7 pour que mon background me suive pas la hauteur de div sfx (deja essayer de fixer background-position: 0 200px; => ok pour page à hauteur < à hauteur ecran, mais lorsque l'on scroll pour les hauteur page > hauteur ecran, le background-attachement n'est plus respecter et on vois le background de sfx disparaitre avec le scroll)

ma feuille corrective IE<7:
#sfx {
background-image : url(http://www.beroots-web.loc/enfant_inca2.png);
background-repeat: no-repeat;
background-position: left bottom;
background-attachment : fixed;
height: 100%;
padding: 10px 0 0 0;
margin: 0;
border: 0;
}


merci d'avance Smiley smile
Modifié par beroots (04 Mar 2008 - 15:27)
Sujet clos
Aller à