Problème css : height: 100%; ne prend pas toute la hauteur

Problème css : height: 100%; ne prend pas toute la hauteur - HTML/CSS - Programmation

Marsh Posté le 02-04-2008 à 22:29:10    

Bonjour,
 
Voilà je veux mettre une image (en fait juste une barre de couleur) sur la gauche de la page, et qui prend toute la hauteur de la page.
L'image n'est que dans le <body>, en position absolute... Voici plutot le code ce sera plus clair :
 
[css]html{
width: 100%;
height: 100%;
}
 
body{
font: "Lucida Grande", "Trebuchet MS", Verdana 0.9em;
background : #fff8e1;
width: 100%;
height: 100%;
margin: 0%;
padding: 0%;
}
 
#bordure_gauche{
position: absolute;
width: 1%;
height: 100%;
left: 0%;
top: 0%;
}
 
#bordure_droite{
position: absolute;
width: 1%;
height: 100%;
right: 0%;
top: 0%;
}
 
#corps{
position: absolute;
width: 55%;
left: 23%;
top: 21%;
border-left: solid 2px #c98900;
border-right: solid 2px #c98900;
background: #ffffff;
}
 
#bas_page{
position: absolute;
width: 100%;
height: 68px;
bottom: 0px;
left: 0%;
}[/css]
 
Le problème est que le #bordure_gauche et #bordure_droite ne prennent pas toute la hauteur de la page, ils ne suivent pas les barres de défilement, l'image ne continue pas quand on baisse la barre de défilement.
 
Voilà le code html :
 
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <link href="bons_plans.css" rel="stylesheet" type="text/css" media="screen" />
  <title>Bons plans du web | Arrondissez facilement vos fins de mois</title>
 </head>
 
 <body>
 
  <!-- Ici mettre l'en-tête de la page -->
  <img src="media/haut_page.jpg" id="banniere"/>
   
  <!-- Ici mettre le menu -->
  <ul class="slidedoormenu">
   <li><a href="index.html">»  Accueil</a></li>
   <li><a href="click_remunere.html">»  Clicks r&eacute;mun&eacute;r&eacute;s</a></li>
   <li><a href="mail_remunere.html" >»  Mails r&eacute;mun&eacute;r&eacute;s</a></li>
   <li><a href="surf_remunere.html">»  Surf r&eacute;mun&eacute;r&eacute;s</a></li>
   <li><a href="parier.html">»  Gagnez aux paris</a></li>
   <li class="lastitem"><a href="jouer_gagner.html">»  Jouez et Gagnez</a></li>  
  </ul>
   
  <div id="corps">
   <div id="bord_haut"></div>
   <div id="bord_hg"></div>
   <div id="bord_hd"></div>
   
   <div id="date"><i>le xx/xx/xx &agrave; xxhxx</i></div>
   <p>Nous s&eacute;lectionnons pour vous les meilleurs plans du net, les plus r&eacute;mun&eacute;rateurs, et les mettons r&eacute;guli&egrave;rement
   &agrave; jour.<br/></p>
   <ul>N'h&eacute;sitez-pas, lancez vous d&egrave;s maintenant et soyez payés pour :<br/><br/>
    <li>Cliquer : Vous n'avez qu'&agrave; cliquer sur les liens que vous propose le site PTC (Pay to Click) et il vous cr&eacute;ditera
     automatiquement votre compte. Une fois le payout atteint (solde minimum de votre compte &agrave; partir duquel vous pouvez retirer
     l'argent gagn&eacute;) faites une demande de paiement !</li>
    <li>Lire des emails : Le principe reste le m&ecirc;me que les PTC mis &agrave; part que les liens pour gagner de l'argent sont envoy&eacute;s
    sur votre boite mail interne du site et/ou (c'est g&eacute;n&eacute;ralement vous qui le choisissez) sur votre adresse email avec  
    laquelle vous vous &ecirc;tes inscrit sur le site.<br/>
    Note : Souvent les PTR (Pay to Read) font aussi PTC.</li>
    <li>Surfer : Vous n'avez qu'&agrave; lancer une barre de surf (celle-ci se place sur un coin de l'&eacute;cran) et continuer &agrave;  
    utiliser internet normalement.</li>
    <li>Parier : Misez s&ucirc;rement et intelligemment sur des &eacute;v&egrave;nements sportifs et gagnez sans retenue !</li>
    <li>Jouer : Gagnez des cadeaux en jouant aux jeux du site !</li>
<p>hjbhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hjbhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hjbhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
   </ul>
   
   <div id="sign">par <i>ghostwinged</i></div>
   
   <div id="bord_bas"></div>
   <div id="bord_bg"></div>
   <div id="bord_bd"></div>
  </div>
   
  <img src="media/bas_page.jpg" id="bas_page"/>
  <img src="media/bordure_gauche.jpg" id="bordure_gauche"/>
  <img src="media/bordure_gauche.jpg" id="bordure_droite"/>
   
 </body>
 
</html>[/html]
 
Voilà, ça fait pas mal de temps que je bataille et que je cherche.
 
Merci d'avance !


Message édité par ghost_winged le 02-04-2008 à 22:31:53
Reply

Marsh Posté le 02-04-2008 à 22:29:10   

Reply

Marsh Posté le 02-04-2008 à 23:32:31    

Ça_marche_chez_moi™
 
Edit: mais le résultat est, sans surprise, assez pourri.
 
Pour avoir aussi taté du height: 100% en CSS, je me suis rendu compte à quel point le résultat peut-être merdique entre les différents navigateurs.
 
De ce que j'ai vu, j'ai pas l'impression que ta mise en page ait besoin de ça. Si j'étais toi, deux div imbriqués avec un background-image en repeat-y et position: 0 0. Un autre background-image sur le deuxième div, repeat-y et position: 100% 0. Tu t'épargneras des heures de suplice. En attendant CSS3 qui permet de spécifier plusieurs background sur le même div....


Message édité par tpierron le 02-04-2008 à 23:33:27
Reply

Marsh Posté le 03-04-2008 à 11:52:28    

Si ça marche chez toi c'est parce que dans le div#corps j'ai enlevé des caracteres pour alléger le post, mais si tu rajoute des caracteres pour que ca dépasse la hauteur de la page (pour qu'il y ait les barres de défilement), alors tu verras le probleme.

 

Je ne sais pas si tu as bien vu comment c'était fichu, en fait la bordure gauche et droite prennent 1% de la largeur de la page, et le menu est collé à la bordure gauche (il est à left: 1%; ). Donc en fait mon image qui se répète pour faire la bordure, c'est une image qui a une largeur et une longueur très petite (pour que ce soit bon pour les petites résolutions), et qui se répète en x et en y (ce qui est automatique quand je redimensionne l'image).

 

Au début j'avais mis deux div (comme je crois que tu dis), un pour la bordure gauche, et un autre pour la bordure droite, puis j'ai essayé avec  les images, mais ça donne le même résultat...

 

J'ai pas très bien compris ton histoire de deux div imbriqués, tu veux dire un div dans un autre ? Mais je ne pense pas que cela résolurait mon problème.

 

Merci pour votre réponse :)


Message édité par ghost_winged le 03-04-2008 à 11:54:18
Reply

Marsh Posté le 05-04-2008 à 22:57:09    

Personne n'a de solution ? :(

Reply

Marsh Posté le 06-04-2008 à 16:01:06    


Je persiste en disant qu'une solution infiniement plus simple serait d'utiliser deux (ok, plutôt trois) div imbriqués. Fixe le padding pour simuler tes marges gauche et droite, en y plaçant ton background-image.

Reply

Marsh Posté le 13-04-2008 à 00:51:52    

Je baisse les bras, je mets la hauteur des bordures en pixels, parce que je ne comprends pas ce que tu veux dire, que mets-tu dans tes trois div imbriqués ? Je me suis aperçu que le problème est que pour la balise body, la page va jusqu'au début de la barre de défilement, mais que pour la balise html il n'y a pas de problème, la page va jusqu'en bas de la barre de défilement...
Pouvez-vous me donner plus d'explications quant à votre solution.
Merci.


Message édité par ghost_winged le 13-04-2008 à 00:52:39
Reply

Marsh Posté le 13-04-2008 à 05:18:42    

Bon, à l'arrache, ça donne :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3. <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.  <link href="bons_plans.css" rel="stylesheet" type="text/css" media="screen" />
  6.  <title>Bons plans du web | Arrondissez facilement vos fins de mois</title>
  7.  <style type="text/css">
  8. html{
  9. width: 100%;
  10. }
  11.  
  12. body{
  13. font: "Lucida Grande", "Trebuchet MS", Verdana 0.9em;
  14. background : #fff8e1;
  15. width: 100%;
  16. margin: 0;
  17. padding: 0;
  18. }
  19.  
  20. #back1{
  21. background: white url(fond2.jpg) repeat-y 0 0;
  22. padding-left: 1%;
  23. }
  24.  
  25. #back2{
  26. background: white url(fond2.jpg) repeat-y 100% 0;
  27. padding-right: 1%;
  28. }
  29.  
  30. #corps2{
  31. border: 1px solid red;
  32. background-color: white;
  33. }
  34. #corps{
  35. width: 55%;
  36. margin-left: auto;
  37. margin-right: auto;
  38. border-left: solid 2px #c98900;
  39. border-right: solid 2px #c98900;
  40. background: #ffffff;
  41. }
  42.  
  43. #bas_page{
  44. width: 100%;
  45. height: 68px;
  46. bottom: 0px;
  47. left: 0%;
  48. }
  49.  </style>
  50. </head>
  51.  
  52. <body>
  53.  
  54.  <!-- Ici mettre l'en-tête de la page -->
  55.  <div id="back1">
  56.  <div id="back2">
  57.  <div id="corps2">
  58.  <img src="media/haut_page.jpg" id="banniere"/>
  59.    
  60.  <!-- Ici mettre le menu -->
  61.  <ul class="slidedoormenu">
  62.   <li><a href="index.html">»  Accueil</a></li>
  63.   <li><a href="click_remunere.html">»  Clicks r&eacute;mun&eacute;r&eacute;s</a></li>
  64.   <li><a href="mail_remunere.html" >»  Mails r&eacute;mun&eacute;r&eacute;s</a></li>
  65.   <li><a href="surf_remunere.html">»  Surf r&eacute;mun&eacute;r&eacute;s</a></li>
  66.   <li><a href="parier.html">»  Gagnez aux paris</a></li>
  67.   <li class="lastitem"><a href="jouer_gagner.html">»  Jouez et Gagnez</a></li>  
  68.  </ul>
  69.    
  70.  <div id="corps">
  71.   <div id="bord_haut"></div>
  72.   <div id="bord_hg"></div>
  73.   <div id="bord_hd"></div>
  74.    
  75.   <div id="date"><i>le xx/xx/xx &agrave; xxhxx</i></div>
  76.   <p>Nous s&eacute;lectionnons pour vous les meilleurs plans du net, les plus r&eacute;mun&eacute;rateurs, et les mettons r&eacute;guli&egrave;rement
  77.   &agrave; jour.<br/></p>
  78.   <ul>N'h&eacute;sitez-pas, lancez vous d&egrave;s maintenant et soyez payés pour :<br/><br/>
  79.    <li>Cliquer : Vous n'avez qu'&agrave; cliquer sur les liens que vous propose le site PTC (Pay to Click) et il vous cr&eacute;ditera
  80.     automatiquement votre compte. Une fois le payout atteint (solde minimum de votre compte &agrave; partir duquel vous pouvez retirer
  81.     l'argent gagn&eacute;) faites une demande de paiement !</li>
  82.    <li>Lire des emails : Le principe reste le m&ecirc;me que les PTC mis &agrave; part que les liens pour gagner de l'argent sont envoy&eacute;s
  83.    sur votre boite mail interne du site et/ou (c'est g&eacute;n&eacute;ralement vous qui le choisissez) sur votre adresse email avec  
  84.    laquelle vous vous &ecirc;tes inscrit sur le site.<br/>
  85.    Note : Souvent les PTR (Pay to Read) font aussi PTC.</li>
  86.    <li>Surfer : Vous n'avez qu'&agrave; lancer une barre de surf (celle-ci se place sur un coin de l'&eacute;cran) et continuer &agrave;  
  87.    utiliser internet normalement.</li>
  88.    <li>Parier : Misez s&ucirc;rement et intelligemment sur des &eacute;v&egrave;nements sportifs et gagnez sans retenue !</li>
  89.    <li>Jouer : Gagnez des cadeaux en jouant aux jeux du site !</li>
  90.   </ul>
  91.    
  92.   <div id="sign">par <i>ghostwinged</i></div>
  93.    
  94.   <div id="bord_bas"></div>
  95.   <div id="bord_bg"></div>
  96.   <div id="bord_bd"></div>
  97.    
  98.  <img src="media/bas_page.jpg" id="bas_page"/>
  99.  </div>
  100.  </div>
  101.  </div>
  102. </body>
  103.  
  104. </html>

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed