La verdad es que es la primera duda que consulto aquí y al final me ha tocado pasar muchas horas de pruebas de posibles soluciones para alcanzar el objetivo. Dejo la solución aquí para que otra persona no gaste tanto tiempo en esto como yo.
La idea es crear mediante div una tabla, con una fila y dos columnas. Independientemente de lo que haya en cada una de las columnas la más pequeña debe aumentar su altura para igualarse con la más alta. Además, en la columna de la derecha (en este caso) se muestra contenido mediante un iframe. El problema clásico es que no funciona el height=100%, por lo que es necesario poner un poco de javascript al final de la página de modo que en este caso se mide la altura de la celda de la izquierda para darle exactamente esa altura al iframe.
Este código está probado y funciona en:
Internet Explorer 8 (no funciona en la vista de compatibilidad, la columna de la derecha se pone bajo la de la izquierda)
Mozilla Firefox 3.0.11
Opera 9.64
Safari 4.0.2
Chrome 2.0.172.33
El enlace de la página es w
*ww.infochinchillas.com/pruebatexto9.php (borrando el
*, que todavía no he escrito 30 mensajes y no me deja poner enlaces)
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h*ttp://w*ww.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html{
height:100%;
}
body{
background-color: #999;
}
#contenedor, #fila {
vertical-align: top;
width: 100%;
border: 0px;
}
#contenedor {
display: table;
}
#fila {
display: table-row;
}
#barra, #cuerpo {
display: table-cell;
vertical-align: top;
overflow: hidden;
height: auto;
}
#barra {
width: 184px;
background-color: #F00;
}
#cuerpo {
background-color: #0C0;
}
#visor {
vertical-align: top;
width: 100%;
overflow:auto;
border: 0px;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="fila">
<div id="barra">
<a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
<a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
<a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
<a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
<a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
<a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
<a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
<a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
<a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
</div>
<div id="cuerpo">
<iframe id="visor" src="h*ttp://w*ww.forosdelweb.com">
<p>Su navegador no soporta iframes. Puede acceder al enlace seleccionado <a href="h*ttp://w*ww.forosdelweb.com">pulsando aquí</a>.</p>
</iframe>
</div>
</div>
</div>
</body>
</html>
<script>
alto = document.getElementById('barra').offsetHeight;
document.getElementById('visor').style.height = alto + 'px';
</script>
Un saludo y gracias por la colaboración: h
*ttp://w
*ww.forosdelweb.com/f13/calcular-height-del-div-contenido-424051/
PD: (Si algún administrador quisiese editar este mensaje para que quedase bien el código y los enlaces se lo agradeceríamos todos, seguro)