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: 684
Antigüedad: 15 años, 4 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 {
    
positionabsolute;
    
top0;
    
left0;
    
z-index1000;
    
background-image:url('b.png');
    
width100%;
    
height100%;
}
</
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: 6 años
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: 684
Antigüedad: 15 años, 4 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: 6 años
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.728
Antigüedad: 8 años
Puntos: 1512
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. <title>Foo</title>
  5. *{ margin: 0; padding: 0;}
  6.  
  7. html, body{
  8.     width: 100%;
  9.     height: 100%;
  10. }
  11.  
  12. #content{
  13.     width: 100%;
  14.     height: 100%;
  15.     min-height: 100%;
  16.     background-color: #cccccc;
  17. }
  18. </head>
  19.  
  20. <div id="content">
  21. asdfasdfa
  22. <br />
  23. <br />
  24. <br />
  25. <br />
  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. adsfasdfasdf
  85. </div>
  86.  
  87. </body>
  88. </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. <title>Foo</title>
  5. *{ margin: 0; padding: 0;}
  6.  
  7. html, body{
  8.     width: 100%;
  9.     height: 100%;
  10. }
  11.  
  12. #content{
  13.     width: 100%;
  14.     height: 100%;
  15.     min-height: 100%;
  16.     background-color: #cccccc;
  17. }
  18. </head>
  19.  
  20. <div id="content">
  21. asdfasdfa
  22. <br />
  23. <br />
  24. <br />
  25. <br />
  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. adsfasdfasdf
  59. </div>
  60.  
  61. </body>
  62. </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.728
Antigüedad: 8 años
Puntos: 1512
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




La zona horaria es GMT -6. Ahora son las 08:46.