Height de un iframe con %

zakabalt · #1 (**permalink**) 09/04/2010, 02:49

Buenos días,

Tengo un archivo html que contiene una tabla y un iframe. Funciona correctamente pero el iframe no me coge todo el espacil que sobra en la pantalla. Os pongo el código para que podais ejecutarlo y ver a que me refiero:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Asun</title>
</head>
<body>
		<table width='100%' height='75%' border='0' bgcolor='#47b7f6'>	
		<tr>
		<td>
			<table width='100%' border='0'>
			<td>Asunto:</td>
			<td>Asunto1</td>
			</tr>
			
			</table>
			</td>		
		
		<td align='right'> Lista
		</td>
	</table>
		<iframe  width='100%' height="100%"  src='http://www.forosdelweb.com'>
		</iframe>
				

		</body>
</html>

Alguien sabe como puedo hacer para que coja toda la pantalla que sobra?

Muchas gracias

abimaelrc · #2 (**permalink**) 09/04/2010, 05:06

Amigo lo mejor es que te leas bien un manual de HTML. Tu código esta muy mal estructurado y eso va a confligir con muchos navegadores.

kyedesigns · #3 (**permalink**) 09/04/2010, 09:09

Hola! Bueno es verdad lo que menciona @abimalerc, la estructura que nos muestras esta un tanto mal estructurado, pero si lo que quieres es que el iFrame tome todo el espcio sobrante necesitas cambiar lo siguiente:

Cita:

El height a "75%" de la TABLA esta limitado el height del iFrame a 75% también. Si la tabla la pones al 100% tomara todo el espacio sobrante.

zakabalt · #4 (**permalink**) 12/04/2010, 02:55

Ya se que no es la mejor estructuración Html posible pero al quere una cosa sencilla tampoco me quería meter a aprender el funcionamiento ás optimo de html. Con que estas lineas funcionen bien me basta, no utilizo más html en ningún sitio.

Poniendo el height de la tabla al 100% tampoco me funciona. Aunque también hay que decir que no me funciona en firefox y en chrome por ejemplo lo hace bien (acabo de probarlo).

Alguna otra sugerencia?

abimaelrc · #5 (**permalink**) 12/04/2010, 11:46

No es que sea más optimo, porque no estamos hablando de optimizar el código. Es de estructuración. La forma como lo tienes conflije con muchos navegadores. Si el código lo vas a usar tu solamente y vas a usar un navegador, entonces no importa, pero si lo quieres publicar para que varias personas la vean tu código no va a funcionar con muchos navegadores.

MarcosiPhone · #6 (**permalink**) 12/04/2010, 14:52

Claro, como dice abimaelrc, si la web va a ser pública, necesitas también corregir esos aspectos...

zakabalt · #7 (**permalink**) 13/04/2010, 00:56

Y vistos mis escasos conocimientos de html, alguien podría proponerme una página en donde en la parte superior haya una tabla con 3 columnas (con que haya una tabla creo que ya sabría dividirla en 3 columnas como yo deseo) y después de la tabla haya un iframe que ocupe la parte sobrante?

No creo que deba de ser muy dificil pero no se me ocurre otra estructuración y como va a ser pública estaría bien que funcione bien en todos los navegadores.

Muchas gracias

PD: Si no entendeis la estructurá ya pondré una captura de pantalla.

nxt89 · #8 (**permalink**) 13/04/2010, 01:34

intenta asi, saludos

Código HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
* {
	border: 0px;
	margin: 0px;
	padding: 0px;
}
.miMarco {
	width: 100%;
	height: 100%;
	border: 0px;
}
#tabla {
	width: 100%;
	height: 100%;
	border: 0px;
}
</style>
<script type="text/javascript">
<!--
	function redimensionar() {
		if (navigator.appName == 'Microsoft Internet Explorer') {
			document.getElementById('tabla').style.height = '100%';
		} else  {
			document.getElementById('tabla').style.height = window.innerHeight + 'px';
		}
	}
//-->
</script>
<title>Asun</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body onload="javascript:redimensionar()">

<table width='100%' height='75%' border='0' bgcolor='#47b7f6'>	
		<tr>
		<td>
			<table width='100%' border='0'>
			<td>Asunto:</td>
			<td>Asunto1</td>
			</tr>
			
			</table>
			</td>		
		
		<td align='right'> Lista
		</td>
	</table>
<table id="tabla">
     <tr>
       
          <td style="width: 100%; height: 100%;">
			<iframe class="miMarco" src="http://www.forosdelweb.com"></iframe>
		</td>
          
     </tr>
</table>
</body>
</html>

zakabalt · #9 (**permalink**) 13/04/2010, 02:26

Muchas gracias, he probado con tu código y me funciona correctamente. Pero tengo una última cuestión, a ver si me podeis ayudar.

Que porcentajes debería de poner para que la tabla utilice el espacio que necesite y todo lo demás sea para el iframe? Con este código la tabla de arriba se dimensiona bien pero luego el iframe se pasa y tengo dos scrolls (el del iframe y el del navegador). Quisiera que el iframe no tuviera scrooll y en caso de que se pase tenga que utilizar el del navegador.

Supongo que será cambiar un porcentaje pero teniendo tantos no se cual tendría que tocar.

nxt89 · #10 (**permalink**) 13/04/2010, 13:11

Investiga algo de la propiedad overflow, en el momento no puedo probar tu codigo pero en unas horas mas tarde intentare mirarlo a ver que se puede hacer.

Saludos