Alto al 100% ( problemas )

m_sassa · #1 (**permalink**) 26/10/2006, 07:22

Hola a todos, les comento que estoy con el siguiente problema: estoy empezando a armar un sitio con CSS y tengo el famoso problema del alto, que no logro que me ocupe el 100%. O sea me ocupa el 100% de la pantalla pero cuando hago scroll para abajo, el fondo no continua. Coloco a continuacion el css:

Código:

html, body {
	height:100%;	
	margin: 0px;
}

#master {
	height:100%;
	width:100%;
	background:#FFFFFF url(../img/background.jpg);
}
#contenedor{
	position:relative;
	top:0px;
	width:772px;
	height:100%;
	background:#FFFFFF url(../img/background_content.jpg) repeat-y;
	margin:0 auto;
}

el html resumido:

Código HTML:

<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="master">
  <div id="contenedor">
        //-- CONTENIDO --//
  <div id="contenedor">
<div id="master">

y una imagen, para que vean el problema:

gracias a todos....

PD: me olvide de agregar que esta vista es el Firefox, en IE se ve mejor, pero de todas formas no llega abajo de todo ( queda menos espacio en blanco, pero queda )

CREW · #2 (**permalink**) 26/10/2006, 09:07

Ola m sassa, te cuento que he tratado de lidiar con este mismo problema desde hace 2 semana, y tampoco he tenido mucha solución...

No se porque, pero resulta que si le borras las 2 primeras lineas del Codigo que te general la pagina:

Estas:
<!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">

si se te adapta al 100%, en cuanto al ALTO...

No se si sea una solución adecuada (por los estandares o algo asi), pero el caso es que a mi me resulto, pero por si acaso llegas a dar con la solución, creo que al igual que yo, muchos te estariamos agradecido...

Saludos!!!

m_sassa · #3 (**permalink**) 26/10/2006, 09:27

pues no, probe borrando las 2 primeras lineas y tampoco, incluso borrando eso me cambio el tamaño de las fuentes de todo el sitio...

algun alma caritativa que nos de una mano...

gracias...

praetor2004 · #4 (**permalink**) 26/10/2006, 14:41

CREW
No tengo una ayuda para este problema, pero borrando los DOCTYPE, lo unico que conseguirás es que tus páginas no validen, y que algunos buscadores no le den un buen reconocimiento, aparte que puede haber otras cosas que no salgan como vos esperas.

opeth · #5 (**permalink**) 26/10/2006, 15:03

tampoco tengo una solución pero el problema al no incluir el Doctype

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

es que activas el Quirks Mode

Saludos

m_sassa · #6 (**permalink**) 26/10/2006, 17:17

y pero debe haber una solucion CSS para esto... ademas de ser algo basico. Que por supuesto, yo no sé. jeje

Si alguien me puede ayudar a solucionar esto, o a hacerlo correctamente si es que esta mal implementado.

GRACIAS

opeth · #7 (**permalink**) 26/10/2006, 17:34

Cita:

#master {
height:100%;
width:100%;
background:#FFFFFF url(../img/background.jpg);
}

que pasa si pones el background que tienes en #contenedor en #master ¿baja hasta el final de la página?

Cita:

#contenedor{
position:relative;
top:0px;
width:772px;
height:100%;
background:#FFFFFF url(../img/background_content.jpg) repeat-y;
margin:0 auto;
}

¿porque pones position:relative y top 0; en #contenedor?

marce_str · #8 (**permalink**) 26/10/2006, 18:47

a mi me paso unas cuantas veces eso y lo que hago es crear un identificador que "estira" el contenedor hacia abajo... el tema es no se si justo te servira a ti, creo que depende de la cantidad de información de la pagina.
O sea... si tenes tanta info que tenes que scrolear seguro te sirve, si tenes menos info no se si funciona.

Código:

#estira {
	height:10px;
	clear:right;
}

Despues justo antes de cerrar el contenendor pone este div

Código HTML:

<html>
<body>
<div id="contenedor">

<!--TODO EL CONTENIDO DE TU PAGINA-->


<div id="estira"></div>
</div>
</body>
</html>

Con lo que te dijeron de poner el contenedor como background en el body, tene cuidado, yo lo hice y en se ve distinto entre los navegadores. A mi por lo menos me paso eso.

Saludos!

m_sassa · #9 (**permalink**) 27/10/2006, 09:01

ok, el background no lo puedo poner en el body, porque si la resolucion cambia, o no tengo la pantalla maximizada, no se centra la imagen, por eso es que la puse dentro del contenedor

voy a seguir probando, y escuchando ideas..

gracias