Buenas noches
imnotinsane
Como primer apunte, quería comentarte si has probado a que las capas (div's) de los laterales tengan un tamaño de 100% de altura, con el fin de que se estiren a la longitud total de tu página, independientemente de la resolución que se use.
Te pongo un ejemplo
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Alargar laterales</title>
<script language="javascript" type="text/javascript">
function meterMasContenido()
{
document.getElementById("centro").innerHTML += "jfaldsjflakdjflkadsj flkasjd flkñdsj alkñfjasdlk fjaslkñd jfñaldsj fñlkaj fñlksjf ñklajdf ñlkjfñlksdajf ks fklsajd fkjsadlk jfsadlkf jñadsjf ñlaksj fads<br><br>fdsajf ldsajflkdjg lkfdj glkfdsj glsdkfj gñlfdsjg ñlfsj gñlkdfjg ñlkfjg ñldsj ñgldñg lfgjreoitgj rtoihjofgij fghjoi fgj oifgjh oifjh oifdjh oipfhj o<br><br>vmf gjfdsg ifdsj giosfdj goisfj goisdfjg oisf jg";
}
function alargar()
{
}
</script>
</head>
<body>
<div id="container" style="position:relative;display:inline;float:left;width:100%;height:500px;border:1px solid red">
<div id="izquierda" style="position:relative;display:inline;float:left;width:300px;height:100%;background-color:red"></div>
<div id="centro" style="position:relative;display:inline;float:left;width:600px;height:500px;background-color:blue">
<input type="Button" value="Meter mas contenido" onclick="meterMasContenido()">
</div>
<div id="derecha" style="position:relative;display:inline;float:left;width:300px;height:100%;background-color:green"></div>
</div>
</body>
</html>
El problema de este código, es que funciona correctamente en IE.. pero en Firefox,, hace un extraño, dado que no se alarga el contenido del DIV a la hora de meterle más texto de forma dinámica.
Este tema ya lo hablamos ayer en otro pos con otro compañero, lo cual se soluciona, metiendo la información, dentro de un TD (dentro de tu DIV de carga de datos).
Te pongo el ejemplo:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Alargar laterales</title>
<script language="javascript" type="text/javascript">
function meterMasContenido()
{
var capaCentral = document.getElementById("centro");
var TDInformacion = capaCentral.getElementsByTagName("td")[0];
TDInformacion.innerHTML += "jfaldsjflakdjflkadsj flkasjd flkñdsj alkñfjasdlk fjaslkñd jfñaldsj fñlkaj fñlksjf ñklajdf ñlkjfñlksdajf ks fklsajd fkjsadlk jfsadlkf jñadsjf ñlaksj fads<br><br>fdsajf ldsajflkdjg lkfdj glkfdsj glsdkfj gñlfdsjg ñlfsj gñlkdfjg ñlkfjg ñldsj ñgldñg lfgjreoitgj rtoihjofgij fghjoi fgj oifgjh oifjh oifdjh oipfhj o<br><br>vmf gjfdsg ifdsj giosfdj goisfj goisdfjg oisf jg";
}
function alargar()
{
}
</script>
</head>
<body>
<div id="container" style="position:relative;display:inline;float:left;width:100%;height:500px;border:1px solid red">
<div id="izquierda" style="position:relative;display:inline;float:left;width:300px;height:100%;background-color:red"></div>
<div id="centro" style="position:relative;display:inline;float:left;width:600px;background-color:blue">
<table cellpadding="0" cellspacing="0" width="100%" style="height:100%" border="0">
<tr>
<td><input type="Button" value="Meter mas contenido" onclick="meterMasContenido()"></td>
</tr>
</table>
</div>
<div id="derecha" style="position:relative;display:inline;float:left;width:300px;height:100%;background-color:green"></div>
</div>
</body>
</html>
Si esto no te es util, y sigues queriendo hacerlo por medio de javascript, te planteo como se haría (siempre y cuando tus dibs, tengan que ocupar TODO el tamaño de tu navegador (desde arriba hasta abajo).
Si tu estructura tiene mas elemento arriba, has de hacerle la resta pertinente de esa medida a la longitud total del documento.
Hay dejo el código:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Alargar laterales</title>
<script language="javascript" type="text/javascript">
function meterMasContenido()
{
var capaCentral = document.getElementById("centro");
var TDInformacion = capaCentral.getElementsByTagName("td")[0];
TDInformacion.innerHTML += "jfaldsjflakdjflkadsj flkasjd flkñdsj alkñfjasdlk fjaslkñd jfñaldsj fñlkaj fñlksjf ñklajdf ñlkjfñlksdajf ks fklsajd fkjsadlk jfsadlkf jñadsjf ñlaksj fads<br><br>fdsajf ldsajflkdjg lkfdj glkfdsj glsdkfj gñlfdsjg ñlfsj gñlkdfjg ñlkfjg ñldsj ñgldñg lfgjreoitgj rtoihjofgij fghjoi fgj oifgjh oifjh oifdjh oipfhj o<br><br>vmf gjfdsg ifdsj giosfdj goisfj goisdfjg oisf jg";
alargar();
}
function alargar()
{
// redimensionamos los laterales y ponemos el tamaño de la capa de la información
document.getElementById("izquierda").style.height = document.getElementById("centro").clientHeight;
document.getElementById("derecha").style.height = document.getElementById("centro").clientHeight;
}
</script>
</head>
<body>
<div id="container" style="position:relative;display:inline;float:left;width:100%;height:500px;border:1px solid red">
<div id="izquierda" style="position:relative;display:inline;float:left;width:300px;height:100%;background-color:red"></div>
<div id="centro" style="position:relative;display:inline;float:left;width:600px;background-color:blue">
<table cellpadding="0" cellspacing="0" width="100%" style="height:100%" border="0">
<tr>
<td><input type="Button" value="Meter mas contenido" onclick="meterMasContenido()"></td>
</tr>
</table>
</div>
<div id="derecha" style="position:relative;display:inline;float:left;width:300px;height:100%;background-color:green"></div>
</div>
</body>
</html>
Espero que te pueda ser de ayuda todo lo que he comentado...
Un saludo a tod@s.
