Problema con overflow:auto

thunder.scripts · #1 (**permalink**) 29/03/2005, 16:06

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

xp64 · #2 (**permalink**) 30/03/2005, 02:26

o es height=100% o es overflow : auto

para que el overflow te funcione la altura de los divs ponla en pixeles no en porcentajes

o sino la altura de la tabla definela en pixeles y la capa ya puede ocupar el 100%

pero la tabla y la capa los dos con height=100% asi nunca va a funcionar lo de overflow

y veo que hasta en body y html estas usando height=100%

yo me pregunto eso para que sirve ?
no se me ocurre nada util

thunder.scripts · #3 (**permalink**) 30/03/2005, 09:31

En body, html, y la tabla tengo height 100% para que se estire al alto de la pantalla, no hay demasiada ciencia en eso :S

Lo que me parecía raro es que si había poco contenido, le daba un fondo cualquiera y le ponía 100% al div, éste se extendía por toda la celda.

Gracias
Fede

Remo:Erdosain · #4 (**permalink**) 30/03/2005, 14:00

height:100% funciona en relación a la propiedad height del elemento padre. TD, padre de #scrolled, no tiene seteado height.
Fijate si eso ayuda.