Foros del Web » Creando para Internet » CSS »

como hacer para que un div se adapte total a la pantalla del navegador

Estas en el tema de como hacer para que un div se adapte total a la pantalla del navegador en el foro de CSS en Foros del Web. como hacer para que un div se adapte total a la pantalla del navegador yo sabia que era asi #contenedor { width: 100%; height: 100%; ...
  #1 (permalink)  
Antiguo 01/09/2013, 13:54
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 10 años, 1 mes
Puntos: 8
como hacer para que un div se adapte total a la pantalla del navegador

como hacer para que un div se adapte total a la pantalla del navegador
yo sabia que era asi
#contenedor {
width: 100%;
height: 100%;
background-color: #0099FF;

}
pero no me sale
aqui les pongo el codigo
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6. <!--
  7. * {padding:0; margin:0; }
  8. body {
  9.     background-color: #FF9900; 
  10. }
  11. #contenedor {
  12.     width: 100%;
  13.     height: 100%;
  14.     background-color: #0099FF;
  15.    
  16. }
  17.  
  18. -->
  19. </head>
  20.  
  21. <div id="contenedor"></div>
  22. </body>
  23. </html>

pero no me sale y no se el porque
quiero que se adapte al 100 % de la pantalla y no lo quiero centrar sino que abarque todo
aunque esta vació

Última edición por jor_0203; 01/09/2013 a las 14:22
  #2 (permalink)  
Antiguo 01/09/2013, 14:37
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 8 años, 3 meses
Puntos: 578
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Me da mala pinta lo de padding:0px Quita eso y por lo demas esta bien.
  #3 (permalink)  
Antiguo 01/09/2013, 14:39
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 8 años, 3 meses
Puntos: 578
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Esque ademas ni es necesario que indiques el margin y padding.
  #4 (permalink)  
Antiguo 01/09/2013, 14:57
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 10 años, 1 mes
Puntos: 8
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Cita:
Iniciado por PHPeros Ver Mensaje
Me da mala pinta lo de padding:0px Quita eso y por lo demas esta bien.
no queda
ya hice todo y no sale
  #5 (permalink)  
Antiguo 01/09/2013, 14:59
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 10 años, 1 mes
Puntos: 8
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Cita:
Iniciado por PHPeros Ver Mensaje
Esque ademas ni es necesario que indiques el margin y padding.
ya lo quite y no pasa nada
el div azul solo se queda hasta donde esta
las letras
y yo quiero que se adapte al navegador
  #6 (permalink)  
Antiguo 01/09/2013, 15:11
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 10 años, 1 mes
Puntos: 8
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--

body {
background-color: #FF9900;
}
#contenedor {
width: 100%;
height: 100%;
background-color: #0099FF;
}

-->
</style>
</head>

<body>
<div id="contenedor">quiero que se adapte al cho y largo de alto del navegador y es de color azul</div>
</body>
</html>
  #7 (permalink)  
Antiguo 01/09/2013, 15:43
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 10 años, 1 mes
Puntos: 8
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

recuerden que el contenedor debe crecer sin contenido
  #8 (permalink)  
Antiguo 01/09/2013, 17:25
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 10 años, 1 mes
Puntos: 8
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

ya encontré el como, me gustaria saber su opinion y espero que haya otra opciones
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6. <!--
  7. html {
  8.     height: 100%;
  9. }
  10. body {
  11.     background-color: #FF9900;
  12.     height: 100%;
  13.     margin-top: 0px;
  14. }
  15. #contenedor {
  16.    width: 100%;
  17.    height: 100%;
  18.    background-color: #0099FF;
  19.    
  20. }
  21.  
  22. -->
  23. </head>
  24.  
  25. <div id="contenedor">
  26.  
  27. </div>
  28. </body>
  29. </html>
  #9 (permalink)  
Antiguo 02/09/2013, 07:28
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 8 años, 3 meses
Puntos: 578
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Me alegro, pero no entiendo que quieres hacer con esto. Un div encima del background tapa todo el color... Tampoco entiendo: html{height:100%}...
  #10 (permalink)  
Antiguo 02/09/2013, 07:35
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 10 años, 1 mes
Puntos: 8
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Cita:
Iniciado por PHPeros Ver Mensaje
Me alegro, pero no entiendo que quieres hacer con esto. Un div encima del background tapa todo el color... Tampoco entiendo: html{height:100%}...
realmente yo busque por todos lados
y esta fue la unica forma para que un div se adapte al navegador
si no trata tu y te datas cuenta es solo se adapta si tienes contenido
y cuando esta vacio desaparece

trata de hacerlo
  #11 (permalink)  
Antiguo 02/09/2013, 07:59
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 8 años, 3 meses
Puntos: 578
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Cita:
Iniciado por jor_0203 Ver Mensaje
realmente yo busque por todos lados
y esta fue la unica forma para que un div se adapte al navegador
si no trata tu y te datas cuenta es solo se adapta si tienes contenido
y cuando esta vacio desaparece

trata de hacerlo
xD no hay mas:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
body {
    background-color: #FF9900;
}
#contenedor {
    width: 100%;
    height: 100%;
    background-color: #0099FF;
}
</style>
</head>
 
<body>
<div id="contenedor">
No hay ningun prob!!
</div>
</body>
</html>
  #12 (permalink)  
Antiguo 02/09/2013, 08:03
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 10 años, 1 mes
Puntos: 8
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Cita:
Iniciado por PHPeros Ver Mensaje
xD no hay mas:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
body {
    background-color: #FF9900;
}
#contenedor {
    width: 100%;
    height: 100%;
    background-color: #0099FF;
}
</style>
</head>
 
<body>
<div id="contenedor">
No hay ningun prob!!
</div>
</body>
</html>
no has entendido el problema
prueba el código este que es el mio
y prueba la solución
y te darás cuenta
el contenedor se debe adaptar a toda la pagina
y sin contenido
  #13 (permalink)  
Antiguo 02/09/2013, 08:14
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 8 años, 3 meses
Puntos: 578
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
body {
    background-color: #FF9900;
}
#contenedor {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #0099FF;
}
</style>
</head>
 
<body>
<div id="contenedor">
Dame unos punticos por facilitarte un poco la vida ;)
</div>
</body>
</html>
  #14 (permalink)  
Antiguo 02/09/2013, 08:14
Avatar de indie_rok  
Fecha de Ingreso: mayo-2013
Ubicación: Top of the world.
Mensajes: 85
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Yo tenia la misma duda, y si.. es asi:

html,body
{
width:100%;
height:100%;
}

Para los que se preguntan para que sirven.. Aqui esta un uso

http://www.humanfactor.mx/emmanuel
  #15 (permalink)  
Antiguo 02/09/2013, 08:23
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 19 años, 4 meses
Puntos: 2113
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Si pones una altura en porcentaje, será en relación a su contenedor. En tu caso body. Como por defecto la altura es automática, es decir, que se adapta según contenido, 100% es relativo a esa altura automática. Entonces tienes que especificar que body tenga una altura específica y no automática.
Y aún así seguirá sin funcionar, porque te ocurriría la misma cosa con html. Y por eso hay que ponerle a ambos una altura de 100%.

La solución de PHPeros es una chapucilla, porque saca el contenido del flujo del HTML sin hacer realmente falta.
  #16 (permalink)  
Antiguo 02/09/2013, 08:26
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 8 años, 3 meses
Puntos: 578
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Cita:
Iniciado por indie_rok Ver Mensaje
Yo tenia la misma duda, y si.. es asi:

html,body
{
width:100%;
height:100%;
}

Para los que se preguntan para que sirven.. Aqui esta un uso

[url]http://www.humanfactor.mx/emmanuel[/url]
Funciona perfectamente sin ese parrafo de codigo. Para mi es inservible dar altura y ancho al propio cuerpo o a una etiqueta que no pertenece al cuerpo del archivo.
  #17 (permalink)  
Antiguo 02/09/2013, 08:27
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 10 años, 1 mes
Puntos: 8
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Cita:
Iniciado por PHPeros Ver Mensaje
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
body {
    background-color: #FF9900;
}
#contenedor {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #0099FF;
}
</style>
</head>
 
<body>
<div id="contenedor">
Dame unos punticos por facilitarte un poco la vida ;)
</div>
</body>
</html>
esto esta genial hermano
muy bueno
  #18 (permalink)  
Antiguo 02/09/2013, 08:32
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 10 años, 1 mes
Puntos: 8
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Cita:
Iniciado por indie_rok Ver Mensaje
Yo tenia la misma duda, y si.. es asi:

html,body
{
width:100%;
height:100%;
}

Para los que se preguntan para que sirven.. Aqui esta un uso

http://www.humanfactor.mx/emmanuel
no entiendo tu contestacion
me podrías explicar mas
ya fui a tu portal y no entendi lo que quieres decir
  #19 (permalink)  
Antiguo 02/09/2013, 08:33
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 10 años, 1 mes
Puntos: 8
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Cita:
Iniciado por pzin Ver Mensaje
Si pones una altura en porcentaje, será en relación a su contenedor. En tu caso body. Como por defecto la altura es automática, es decir, que se adapta según contenido, 100% es relativo a esa altura automática. Entonces tienes que especificar que body tenga una altura específica y no automática.
Y aún así seguirá sin funcionar, porque te ocurriría la misma cosa con html. Y por eso hay que ponerle a ambos una altura de 100%.

La solución de PHPeros es una chapucilla, porque saca el contenido del flujo del HTML sin hacer realmente falta.
ya entendi
que buena explicacion
y esto tu para que lo usas
mil gracias
  #20 (permalink)  
Antiguo 02/09/2013, 09:25
Avatar de indie_rok  
Fecha de Ingreso: mayo-2013
Ubicación: Top of the world.
Mensajes: 85
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Cita:
Iniciado por PHPeros Ver Mensaje
Funciona perfectamente sin ese parrafo de codigo. Para mi es inservible dar altura y ancho al propio cuerpo o a una etiqueta que no pertenece al cuerpo del archivo.
No es verdad. Si se lo quitas; la altura sigue siento auto ajustable a contenido y no es fija.
  #21 (permalink)  
Antiguo 02/09/2013, 09:27
Avatar de indie_rok  
Fecha de Ingreso: mayo-2013
Ubicación: Top of the world.
Mensajes: 85
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Cita:
Iniciado por jor_0203 Ver Mensaje
no entiendo tu contestacion
me podrías explicar mas
ya fui a tu portal y no entendi lo que quieres decir
Una persona preguntó que aplicación tendria dar el alto y el ancho al 100% de un contenedor. En la página que les mandé se ve como uso un contenedor completo para hacer un slider en la misma página con varios contenedores al 100%
  #22 (permalink)  
Antiguo 02/09/2013, 14:35
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 10 años, 1 mes
Puntos: 8
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Cita:
Iniciado por PHPeros Ver Mensaje
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
body {
    background-color: #FF9900;
}
#contenedor {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #0099FF;
}
</style>
</head>
 
<body>
<div id="contenedor">
Dame unos punticos por facilitarte un poco la vida ;)
</div>
</body>
</html>
hola una pregunta al ser
posicion absoluta no hay algun problema?
  #23 (permalink)  
Antiguo 02/09/2013, 14:53
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 19 años, 4 meses
Puntos: 2113
Respuesta: como hacer para que un div se adapte total a la pantalla del navegador

Cita:
Iniciado por jor_0203 Ver Mensaje
hola una pregunta al ser
posicion absoluta no hay algun problema?
Que en principio no deben de usarse para la estructuración general porque causará más de un problema.

Etiquetas: cs5, diseño-gráfico
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 21:12.