Foros del Web » Creando para Internet » CSS »

Problema con overflow:auto

Estas en el tema de Problema con overflow:auto en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/03/2005, 16:06
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
Problema con overflow:auto

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
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #2 (permalink)  
Antiguo 30/03/2005, 02:26
(Desactivado)
 
Fecha de Ingreso: febrero-2005
Ubicación: Azcapotzalco
Mensajes: 299
Antigüedad: 12 años, 10 meses
Puntos: 2
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
  #3 (permalink)  
Antiguo 30/03/2005, 09:31
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
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
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #4 (permalink)  
Antiguo 30/03/2005, 14:00
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 12 años, 10 meses
Puntos: 0
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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:55.