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

jor_0203 · #1 (**permalink**) 01/09/2013, 13:54

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<!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">
<!--
* {padding:0; margin:0; }
body {
    background-color: #FF9900;  
}
#contenedor {
    width: 100%;
    height: 100%;
    background-color: #0099FF;
    
}
 
-->
</style>
</head>
 
<body>
<div id="contenedor"></div>
</body>
</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ó

PHPeros · #2 (**permalink**) 01/09/2013, 14:37

Me da mala pinta lo de padding:0px Quita eso y por lo demas esta bien.

PHPeros · #3 (**permalink**) 01/09/2013, 14:39

Esque ademas ni es necesario que indiques el margin y padding.

jor_0203 · #4 (**permalink**) 01/09/2013, 14:57

Cita:

Iniciado por PHPeros

Me da mala pinta lo de padding:0px Quita eso y por lo demas esta bien.

no queda
ya hice todo y no sale

jor_0203 · #5 (**permalink**) 01/09/2013, 14:59

Cita:

Iniciado por PHPeros

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

jor_0203 · #6 (**permalink**) 01/09/2013, 15:11

<!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ítulo</title>
<style type="text/css">

</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>

jor_0203 · #7 (**permalink**) 01/09/2013, 15:43

recuerden que el contenedor debe crecer sin contenido

jor_0203 · #8 (**permalink**) 01/09/2013, 17:25

ya encontré el como, me gustaria saber su opinion y espero que haya otra opciones

Código HTML:

Ver original<!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">
<!--
html {
     height: 100%;
}
body {
    background-color: #FF9900;
    height: 100%;
    margin-top: 0px;
}
#contenedor {
    width: 100%;
    height: 100%;
    background-color: #0099FF;
    
}
 
-->
</style>
</head>
 
<body>
<div id="contenedor">
 
</div>
</body>
</html>

PHPeros · #9 (**permalink**) 02/09/2013, 07:28

Me alegro, pero no entiendo que quieres hacer con esto. Un div encima del background tapa todo el color... Tampoco entiendo: html{height:100%}...

jor_0203 · #10 (**permalink**) 02/09/2013, 07:35

Cita:

Iniciado por PHPeros

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

PHPeros · #11 (**permalink**) 02/09/2013, 07:59

Cita:

Iniciado por jor_0203

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>

jor_0203 · #12 (**permalink**) 02/09/2013, 08:03

Cita:

Iniciado por PHPeros

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

PHPeros · #13 (**permalink**) 02/09/2013, 08:14

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>

indie_rok · #14 (**permalink**) 02/09/2013, 08:14

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

pzin · #15 (**permalink**) 02/09/2013, 08:23

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.

PHPeros · #16 (**permalink**) 02/09/2013, 08:26

Cita:

Iniciado por indie_rok

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.

jor_0203 · #17 (**permalink**) 02/09/2013, 08:27

Cita:

Iniciado por PHPeros

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

jor_0203 · #18 (**permalink**) 02/09/2013, 08:32

Cita:

Iniciado por indie_rok

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

jor_0203 · #19 (**permalink**) 02/09/2013, 08:33

Cita:

Iniciado por pzin

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

indie_rok · #20 (**permalink**) 02/09/2013, 09:25

Cita:

Iniciado por PHPeros

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.

indie_rok · #21 (**permalink**) 02/09/2013, 09:27

Cita:

Iniciado por jor_0203

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%

jor_0203 · #22 (**permalink**) 02/09/2013, 14:35

Cita:

Iniciado por PHPeros

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?

pzin · #23 (**permalink**) 02/09/2013, 14:53

Cita:

Iniciado por jor_0203

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.