Tema: Div a pantalla completa
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 10/08/2011, 13:35
Avatar de abimaelrc
abimaelrc
Colaborador
  
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.734
Antigüedad: 15 años, 6 meses
Puntos: 1517
Respuesta: Div a pantalla completa
Para que un div ocupe todo, requiere que el padre tenga todo el contenido, sino no vas a poder tenerlo. Es decir algo como
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Foo</title>
  6. <style>
  7. *{ margin: 0; padding: 0;}
  8.  
  9. html, body{
  10.     width: 100%;
  11.     height: 100%;
  12. }
  13.  
  14. #content{
  15.     width: 100%;
  16.     height: 100%;
  17.     min-height: 100%;
  18.     background-color: #cccccc;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23.  
  24. <div id="content">
  25. asdfasdfa
  26. <br />
  27. <br />
  28. <br />
  29. <br />
  30. <br />
  31. <br />
  32. <br />
  33. <br />
  34. <br />
  35. <br />
  36. <br />
  37. <br />
  38. <br />
  39. <br />
  40. <br />
  41. <br />
  42. <br />
  43. <br />
  44. <br />
  45. <br />
  46. <br />
  47. <br />
  48. <br />
  49. <br />
  50. <br />
  51. <br />
  52. <br />
  53. <br />
  54. <br />
  55. <br />
  56. <br />
  57. <br />
  58. <br />
  59. <br />
  60. <br />
  61. <br />
  62. <br />
  63. <br />
  64. <br />
  65. <br />
  66. <br />
  67. <br />
  68. <br />
  69. <br />
  70. <br />
  71. <br />
  72. <br />
  73. <br />
  74. <br />
  75. <br />
  76. <br />
  77. <br />
  78. <br />
  79. <br />
  80. <br />
  81. <br />
  82. <br />
  83. <br />
  84. <br />
  85. <br />
  86. <br />
  87. <br />
  88. adsfasdfasdf 
  89. </div>
  90.  
  91. </body>
  92. </html>

Y si el contenido es menor
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Foo</title>
  6. <style>
  7. *{ margin: 0; padding: 0;}
  8.  
  9. html, body{
  10.     width: 100%;
  11.     height: 100%;
  12. }
  13.  
  14. #content{
  15.     width: 100%;
  16.     height: 100%;
  17.     min-height: 100%;
  18.     background-color: #cccccc;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23.  
  24. <div id="content">
  25. asdfasdfa
  26. <br />
  27. <br />
  28. <br />
  29. <br />
  30. <br />
  31. <br />
  32. <br />
  33. <br />
  34. <br />
  35. <br />
  36. <br />
  37. <br />
  38. <br />
  39. <br />
  40. <br />
  41. <br />
  42. <br />
  43. <br />
  44. <br />
  45. <br />
  46. <br />
  47. <br />
  48. <br />
  49. <br />
  50. <br />
  51. <br />
  52. <br />
  53. <br />
  54. <br />
  55. <br />
  56. <br />
  57. <br />
  58. <br />
  59. <br />
  60. <br />
  61. <br />
  62. adsfasdfasdf 
  63. </div>
  64.  
  65. </body>
  66. </html>
Eso funciona tanto en IE como en los demás navegadores
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos