100% de hauteur (CSS)

100% de hauteur (CSS) - HTML/CSS - Programmation

Marsh Posté le 10-03-2006 à 10:19:50    

Bonjour à tous !
 
J'ai trouvé (et modifié) cette page web (avec cette feuille de style). Cependant, j'aimerais que l'élément d'id #centre prenne automatiquement toute la hauteur du navigateur. Je ne vois pas comment changer cela... si quelqu'un peut m'aider...
 
Merci d'avance !
 
Fichier html :  

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="en" lang="en">
  3. <head>
  4. <title>Exemple</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <style type="text/css">
  7. @import url("fluid.css" );
  8. </style></head>
  9. <body>
  10. <div id="conteneur">
  11.   <div id="header">Header</div>
  12.   <div id="gauche"><p>menu</p>
  13.   <ul class="menugauche">
  14.   <li><a href="">Menu 1</a></li>
  15.   <li><a href="">Menu 2</a></li>
  16.   <li><a href="">Menu 3</a></li>
  17.   <li><a href="">Menu 4</a></li>
  18.   </ul>
  19.   </div>
  20.  
  21.   <div id="droite"><p>right</p>
  22.   <ul class="menudroit">
  23.   <li><a href="">Menu 1</a></li>
  24.   <li><a href="">Menu 2</a></li>
  25.   <li><a href="">Menu 3</a></li>
  26.   <li><a href="">Menu 4</a></li>
  27.   </ul>
  28.   </div>
  29.  
  30.    <div id="centre">
  31.      part with content occupying rest of width<br>
  32.      part with content occupying rest of width<br>
  33.      part with content occupying rest of width<br>
  34.      part with content occupying rest of width<br>
  35.    </div>
  36.  
  37.   <div id="pied">Footer</div>
  38. </div>
  39.  
  40. </body></html>


 
Feuille de style :  

Code :
  1. /* CSS from tutorials of www.alsacreations.com/articles */
  2. body {
  3. font-family:Verdana, Arial, Helvetica, sans-serif;
  4. font-size: 0.8em;
  5. margin: 0;
  6. padding: 0;
  7. }
  8. #header {
  9. height: 60px;
  10. background-color: #99CCCC;
  11. }
  12. #conteneur {
  13. position: absolute;
  14. width: 100%;
  15. background-color:#CCCCFF;
  16. }
  17. #centre {
  18. background-color:#9999CC;
  19. margin-left: 150px;
  20. margin-right: 150px;
  21. height:490px;
  22. overflow: auto;
  23. }
  24. #gauche {
  25. position: absolute;
  26. left:0;
  27. width: 150px;
  28. }
  29. #droite {
  30. position: absolute;
  31. right:0;
  32. width: 150px;
  33. }
  34. #pied {
  35. height: 30px;
  36. background-color: #99CC99;
  37. }
  38. .menugauche {
  39. list-style-type: none;
  40. margin: 0;
  41. padding:0;
  42. }
  43. .menugauche li {
  44. margin-bottom: 5px;
  45. }
  46. .menugauche a {
  47. margin: 0 2px;
  48. color: #000000;
  49. text-decoration: underline;
  50. }
  51. .menugauche a:hover {
  52. text-decoration: none;
  53. }
  54. .menudroit {
  55. list-style-type: none;
  56. margin: 0;
  57. padding:0;
  58. }
  59. .menudroit li {
  60. margin-bottom: 5px;
  61. }
  62. .menudroit a {
  63. margin: 0 2px;
  64. color: #000000;
  65. text-decoration: underline;
  66. }
  67. .menudroit a:hover {
  68. text-decoration: none;
  69. }
  70. p {margin: 0 0 10px 0;}



---------------
Matt
Reply

Marsh Posté le 10-03-2006 à 10:19:50   

Reply

Marsh Posté le 10-03-2006 à 10:39:11    

ben dans le css du body, height: 100%;

Reply

Marsh Posté le 10-03-2006 à 11:02:31    

ça ne change absolument rien...


---------------
Matt
Reply

Marsh Posté le 10-03-2006 à 11:19:37    

html, body, #centre {
  height: 100%
}

Reply

Marsh Posté le 10-03-2006 à 11:31:40    

ca ne marche pas non plus (je suis sous Firefox)..


---------------
Matt
Reply

Marsh Posté le 10-03-2006 à 11:32:34    

Ca ne fonctionne pas de quelle manière ?

Reply

Marsh Posté le 10-03-2006 à 11:40:58    

je change la résolution de mon écran pour tester. La largeur est à 100% comme prévu, mais la hauteur ne change pas, elle reste fixe.


---------------
Matt
Reply

Marsh Posté le 11-03-2006 à 11:39:04    

J'ai également trouvé ce modèle, mais il ne propose pas une hauteur de 100%...
 
http://blog.html.it/layoutgala/LayoutGala13.html


---------------
Matt
Reply

Sujets relatifs:

Leave a Replay

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