Foros del Web » Creando para Internet » CSS »

Div a pantalla completa

 Estas en el tema de Div a pantalla completa en el foro de CSS en Foros del Web. Como lo hago para que un div ocupe todo el contenido de una página y no solo la parte visible? (todo funciona bien hasta que ...
  #1 (permalink)  
Antiguo 10/08/2011, 13:05
Avatar de pcarvajal  
Fecha de Ingreso: enero-2002
Mensajes: 701
Antigüedad: 22 años, 11 meses
Puntos: 8
Div a pantalla completa
Como lo hago para que un div ocupe todo el contenido de una página y no solo la parte visible? (todo funciona bien hasta que el usuario usa el scroll...)

He aquí el código que uso:

Código PHP:
<html>
<head>
<style type="text/css">

#inhabilitar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background-image:url('b.png');
    width: 100%;
    height: 100%;
}
</style>
<body>
<div id="inhabilitar">&nbsp;</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html> 
Gracias de antemano!
  #2 (permalink)  
Antiguo 10/08/2011, 13:18
 
Fecha de Ingreso: mayo-2011
Mensajes: 171
Antigüedad: 13 años, 7 meses
Puntos: 32
Respuesta: Div a pantalla completa
no si es esto pero ...
Código HTML: 
Ver original
  1. <html> 
  2. <head> 
  3. <style type="text/css"> 
  4.  
  5. #inhabilitar { 
  6.     position: fixed; 
  7.     top: 0; 
  8.     left: 0; 
  9.     z-index: 1000; 
  10.     background:#0F0 ; 
  11.     width: 100%; 
  12.     height: 100%; 
  13.     overflow:auto;
  14. } 
  15. </style> 
  16. <body> 
  17. <div id="inhabilitar">
  18. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>.<br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>.<br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>.<br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. 
  19. dsa
  20. </div>
  21. </body> 
  22. </html>

para que se quede fijo se usa el position: fixed; así corra la barra el elemento de quedara alli
  #3 (permalink)  
Antiguo 10/08/2011, 13:23
Avatar de pcarvajal  
Fecha de Ingreso: enero-2002
Mensajes: 701
Antigüedad: 22 años, 11 meses
Puntos: 8
Respuesta: Div a pantalla completa
No no, el contenido lo pusiste dentro del div (los <br>), y deben ir afuera.
  #4 (permalink)  
Antiguo 10/08/2011, 13:33
 
Fecha de Ingreso: mayo-2011
Mensajes: 171
Antigüedad: 13 años, 7 meses
Puntos: 32
Respuesta: Div a pantalla completa
Cita:
Iniciado por pcarvajal Ver Mensaje
No no, el contenido lo pusiste dentro del div (los <br>), y deben ir afuera.
pues ponlos fuera, la cuestión que uses position: fixed; para que se queden fijos


Código HTML: 
Ver original
  1. <html> 
  2. <head> 
  3. <style type="text/css"> 
  4.  
  5. #inhabilitar { 
  6.     position: fixed; 
  7.     top: 0; 
  8.     left: 0; 
  9.     z-index: 1000; 
  10.     background:#0F0 ; 
  11.     width: 100%; 
  12.     height: 100%; 
  13. } 
  14. </style> 
  15. <body> 
  16. <div id="inhabilitar"> &nbps;</div>
  17. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>.<br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>.<br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>.<br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. <br>. 
  18. dsa
  19. </body> 
  20. </html>
  #5 (permalink)  
Antiguo 10/08/2011, 13:35
Avatar de 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
  #6 (permalink)  
Antiguo 10/08/2011, 13:38
Avatar de 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
OOOhhhhhh si quieres que ocupe toda la pantalla porque es un lightbox o algo por el estilo, usa lo que te recomendo dukeblass, sobre position: fixed.
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos

Etiquetas: completa, contenido, html, pantalla, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 04:34.