Tengo una tabla al 100% con una cabecera y un alto fijo.
La celda central tiene un div que necesito mantenga su alto siempre, y en caso de tener demasiado contenido aparezca un scroll. Como un iframe, pero sin serlo.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Envision</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
#contenedor {
width: 763px;
margin: auto;
height: 100%;
background: #445599;
border: 0px none;
}
td {
padding: 10px;
}
#header {
background-image: url("images/index/header.jpg");
background-position: center;
background-repeat: no-repeat;
height: 126px;
}
#foot {
height: 150px;
}
#miami_projects {
background-image: url(images/ecuador/miami_projects.gif);
background-position: bottom left;
background-repeat: no-repeat;
background-color: rgb(235,234,240);
width: 356px;
height: 150px;
float: left;
color: rgb(79,76,119);
}
#masinfo {
float: right;
background-image: url(images/index/masinfo.gif);
background-position: bottom left;
background-repeat: no-repeat;
background-color: rgb(236,235,205);
height: 150px;
width: 172px;
margin-left: 12px;
color: rgb(150,150,116);
}
#projects_blue {
width: 172px;
color: rgb(255,255,255);
margin: 0px;
}
#scrolled {
height: 100%;
overflow: scroll;
background-color:#009900;
}
</style>
</head>
<body>
<table id="contenedor">
<!-- CABECERA -->
<tr><td id="header" colspan="2"></td></tr>
<tr>
<!-- CONTENIDO -->
<td>
<div id="scrolled">
CONTENIDO<br />
CONTENIDO<br />
CONTENIDO<br />
CONTENIDO<br />
CONTENIDO<br />
CONTENIDO<br />
CONTENIDO<br />
CONTENIDO<br />
CONTENIDO<br />
CONTENIDO<br />
CONTENIDO<br />
CONTENIDO<br />
CONTENIDO<br />
CONTENIDO<br />
CONTENIDO<br />
CONTENIDO<br />
CONTENIDO<br />
CONTENIDO<br />
</div>
</td>
<!-- COLUMNA DERECHA 100% -->
<td rowspan="2" id="projects_blue">
DERECHA
</td>
</tr>
<tr>
<!-- PIE -->
<td id="foot">
<div id="miami_projects">
<ul id="miami_list1">
<li>Murano Grande</li>
<li>Two Tequesta</li>
</ul>
</div>
<div id="masinfo">
<ul>
<li>Sobre Invision</li>
<li>Por qué Invertir</li>
<li>Contáctanos</li>
<li>Vende su Propiedad</li>
</ul>
</div>
</td>
</tr>
</table>
</body>
</html> Como está ahora funciona sólo en Opera. Si le pongo overflow:auto (sería lo ideal) ni siquiera en Opera funciona.
¿Alguna idea? Sin JavaScript, si es posible.
Gracias
Fede