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>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  8. <style type="text/css">
  9. @import url("fluid.css" );
  10. </style></head>
  12. <body>
  14. <div id="conteneur">
  16.   <div id="header">Header</div>
  18.   <div id="gauche"><p>menu</p>
  19.   <ul class="menugauche">
  20.   <li><a href="">Menu 1</a></li>
  21.   <li><a href="">Menu 2</a></li>
  22.   <li><a href="">Menu 3</a></li>
  23.   <li><a href="">Menu 4</a></li>
  24.   </ul>
  25.   </div>
  26.  
  27.   <div id="droite"><p>right</p>
  28.   <ul class="menudroit">
  29.   <li><a href="">Menu 1</a></li>
  30.   <li><a href="">Menu 2</a></li>
  31.   <li><a href="">Menu 3</a></li>
  32.   <li><a href="">Menu 4</a></li>
  33.   </ul>
  34.   </div>
  35.  
  36.    <div id="centre">
  37.      part with content occupying rest of width<br>
  38.      part with content occupying rest of width<br>
  39.      part with content occupying rest of width<br>
  40.      part with content occupying rest of width<br>
  41.    </div>
  42.  
  43.   <div id="pied">Footer</div>
  44. </div>
  45.  
  47. </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. }
  39. .menugauche {
  40. list-style-type: none;
  41. margin: 0;
  42. padding:0;
  43. }
  44. .menugauche li {
  45. margin-bottom: 5px;
  46. }
  47. .menugauche a {
  48. margin: 0 2px;
  49. color: #000000;
  50. text-decoration: underline;
  51. }
  52. .menugauche a:hover {
  53. text-decoration: none;
  54. }
  55. .menudroit {
  56. list-style-type: none;
  57. margin: 0;
  58. padding:0;
  59. }
  60. .menudroit li {
  61. margin-bottom: 5px;
  62. }
  63. .menudroit a {
  64. margin: 0 2px;
  65. color: #000000;
  66. text-decoration: underline;
  67. }
  68. .menudroit a:hover {
  69. text-decoration: none;
  70. }
  71. 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