alto de un div

dieguicho · #1 (**permalink**) 24/03/2008, 18:19

estimados.
tengo dos divs.

<div id=encabezado>encabezado</div>
<div id=contenido>contenido</div>

de que manera puedo lograr que div#contenido ocupe todo el resto del a pantalla? tanto en ancho como en alto?
probe con min-height: 100%; pero no funciona porque hace un div de 100% pero como yo ya tenia el encabezado me lo suma y me genera scroll.
la idea es que el encabezao ocupe lo que ocupe y todo el resto sea contenido
gracias!!

juaniquillo · #2 (**permalink**) 24/03/2008, 19:25

En algún sitio leí que tienes que darle al elemento padre un alto definido para que un div acepte el height 100%. En el caso de un contenedor debes darle al body y al html 100% y cero padding y margin porque si no crecen más del 100%, aunque la verdad es que nunca lo he probado ni se si funciona bien en todos los navegadores.

Mikmoro · #3 (**permalink**) 25/03/2008, 01:18

Lo puedes hacer haciendo el contenido del 100% y metiendo el encabezado dentro:

Cita:

<!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>cien por cien</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#contenido{
height: 100%;
background-color: #788DA2;
height: 100%;
}
#encabezado{
background-color: #f00;
height: 100px;
}
</style>
</head>
<body>
<div id="contenido">
<div id="encabezado">encabezado</div>
<p>contenido</p>
</div></body>
</html>

Mikel.

dieguicho · #4 (**permalink**) 29/03/2008, 13:15

y si fuera este el caso?

<div id=encabezado>encabezado</div>
<div id=contenido>contenido</div>
<div id=pie>pie</div>

mandar el pie abajo el encabezado arriba y todo el resto que sea contenido :)

webosiris · #5 (**permalink**) 29/03/2008, 14:35

Cita:

Iniciado por juaniquillo

En algún sitio leí que tienes que darle al elemento padre un alto definido para que un div acepte el height 100%.

estás en lo correcto, y esto tiene su lógica.

el height X% significa que va a tener un alto de X% CON RESPECTO A SU ELEMENTO PADRE (el elemento HTML es padre de todos los demás, y por defecto tiene una altura = a lo que ocupen sus elementos hijos... en un sitio "vacio", esa altura es 0px)

Cita:

Iniciado por dieguicho

el pie abajo el encabezado arriba y todo el resto que sea contenido

para esa estructura lo que yo hago es meter el encabezado dentro del contenido, darle al contenido min-height:100% y posicionar el pie con margen negativo.... sería algo así

Código:

html, body{height:100%}
#contenido{min-height:100%;}
#pie{height:40px;margin-top:-40px}

Código HTML:

<div id="contenido">
<div id="top"></div>
</div>
<div id="pie"></div>

juaniquillo · #6 (**permalink**) 31/03/2008, 13:57

Gracias webosiris. Yo había leído sobre eso pero la verdad es que nunca he tenido la necesidad de que hacer mis contenedores del ancho de body. siempre hago que el contenido defina la altura y, cuando tengo la necesidad de usar una imagen de fondo para todo, pongo la imagen en el body y la repito verticalmente.