Ancho de div

aclbravo · #1 (**permalink**) 24/02/2008, 15:03

Hola, tengo este código.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
#div1{
position:relative;
border:red 1px solid;
height:100px;
width:auto;
}
#div2{
top:105px;
position:relative;
border:red 1px solid;
height:auto;
width:auto;
}
</style>
</head>
<body>
<div id="div1"><div>
<div id="div2"><div>
</body>
</html>

No se como hacer para que el div2 ocupe todo el height sobrante. Es decir height 100% - 100px(div1). Esto con indipendencia de la resolución de pantalla y para IE y FF.

Muchas Gracias,
Un Saludo,
Alberto.

hades87 · #2 (**permalink**) 24/02/2008, 16:25

para comenzar decirte que el doctype lo tienes mal puesto, y para que ocupe el 100%, hasde poner al principio de todo esto:

html, body{
height:100%;
}

y en el div2 esto:
#div2{
height: 100%;
top:105px;
position:relative;
border:red 1px solid;
height:auto;
width:auto;
}

aclbravo · #3 (**permalink**) 25/02/2008, 12:44

Gracias por la ayuda, pero sigue sin verse. Ahora mismo lo tengo asi

html, body{
height:100%;
}
#div1{
position:relative;
border:red 1px solid;
height:100px;
width:auto;
}
#div2{
top:105px;
position:relative;
border:red 1px solid;
height:100%;
width:auto;
}

En mozilla se el segundo div no tiene ancho. En explorer tiene el mismo ancho que el div1.
Probé con los estos dos doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Saludos

hades87 · #4 (**permalink**) 25/02/2008, 14:19

o al segundo pone height: inherit.