Can't scroll to end of iframe...

PhotoMadPixie · Joined: 08 Feb 2009 Posts: 1

Hi guys,

This is my styles:

#top
{
position: fixed;
top: 0;
left: 0;
width: 100%;
/*Height of frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
vertical-align: top;
padding:0;
height: 131px;
}
.content
{
position: fixed;
/*Set top value to HeightOfFrameDiv*/
left: 0px;
right: 0px;
top: 131px;
overflow: scroll;
background: #ffffff;
height: 100%;
vertical-align: top;
margin-top:0px;
}

The "top" styles is for my menu which needs to be fixed at the top at all times, the "content" is my iframe, which needs to scroll so you can view the content.

Now the problem is, when I scroll the iframe I can't scroll to the very bottom, a piece is hidden in the browser.

sticks464 · Joined: 31 Dec 2006 Posts: 2625

Need to see all your code or a live link.

Uprising54 · Joined: 13 Jul 2009 Posts: 5

Im having the very same problem!!! Any possible solution?

For example, the following test site:

test.faimevi.eu/FAIMEVI/es.html

(navigate to the first option of the second drop-down menu to see a clear example of the "clipping")

sticks464 · Joined: 31 Dec 2006 Posts: 2625

One of the problems of using absolute positioning for page layout. The only solution is to add some padding to the last element on the page being displayed in the frame.

Uprising54 · Joined: 13 Jul 2009 Posts: 5

sticks464 · Joined: 31 Dec 2006 Posts: 2625

You can add padding or margins to any element. I would add it to the last element on the page be it a paragraph, div etc. Try 10px of padding to the bottom of the last paragraph. If padding and/or margins fail on the last element, try it on the content containing div that holds all the content.

Uprising54 · Joined: 13 Jul 2009 Posts: 5

I appreciate your help sticks464!!!

I just finished trying to add the padding, but i had no success. I included the following code (which is the code pertaining to one of the pages that does not load completely). Everywhere you see a bold element is where i tried your suggestion. Could i have placed it somewhere else???

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="Generator" content="iWeb 3.0.1" />
<meta name="iWeb-Build" content="local-build-20090715" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="viewport" content="width=570" />
<title>es(2-1)</title>
<link rel="stylesheet" type="text/css" media="screen,print" href="es%282-1%29_files/es%282-1%29.css" />


<script type="text/javascript" src="Scripts/iWebSite.js"></script>
<script type="text/javascript" src="es%282-1%29_files/es%282-1%29.js"></script>
</head>
<body style="background: transparent; margin: 10pt; padding-bottom: 20px;" onload="onPageLoad();">
<div style="text-align: center; padding-bottom: 20px;">
<div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word; background: transparent; text-align: left; width: 570px; " id="body_content">
<div style="float: left; margin-left: 0px; position: relative; width: 570px; z-index: 0; " id="nav_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div style="clear: both; height: 0px; line-height: 0px; " class="spacer"> </div>
</div>
<div style="float: left; height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 570px; z-index: 10; " id="header_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
</div>
<div style="margin-left: 0px; position: relative; width: 570px; z-index: 5; " id="body_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div id="id1" style="height: 1449px; left: 0px; position: absolute; top: 0px; width: 570px; z-index: 1; " class="style_SkipStroke shape-with-text">
<div class="text-content graphic_textbox_layout_style_default_External_570_1449" style="padding: 0px; ">
<div class="graphic_textbox_layout_style_default">
La Energía 
 
<ol>
<li style="line-height: 12px; padding-left: 14px; text-indent: -14px; " class="full-width" value="1">
1.CONCEPTO DE ENERGÍA. 
</li>
<li style="line-height: 12px; padding-left: 25px; text-indent: -25px; " class="full-width">
La energía es una palabra común y conocida por todos, si bien a menudo nos resultaría difícil dar una definición exacta. Esto es debido a que el término en sí pertenece al mundo de la física, pero la gran dependencia actual de la misma por parte de la sociedad, hace que sea un término de uso cotidiano, aún a pesar de ser un ente intangible del que sólo podemos notar sus efectos. 
</li>
<li style="line-height: 12px; padding-left: 25px; text-indent: -25px; " class="full-width">
Desde un punto de vista físico (y como recoge el diccionario de la RAE en su 2ª acepción), se define energía como: capacidad de un sistema físico para realizar un trabajo. 
</li>
<li style="line-height: 12px; padding-left: 50px; text-indent: -50px; " class="full-width">
Ley de conservación de la energía (también 1º Principio de la Termodinámica): 
</li>
<li style="line-height: 12px; padding-left: 75px; text-indent: -75px; " class="full-width">
La energía ni se crea ni se destruye, sólo se transforma, y son estas transformaciones las que mueven nuestra sociedad actual. 
</li>
<li style="line-height: 12px; padding-left: 50px; text-indent: -50px; " class="full-width">
2º Principio de la Termodinámica: 
</li>
<li style="line-height: 12px; padding-left: 75px; text-indent: -75px; " class="full-width">
Sin meternos en engorrosas definiciones físicas, diremos que la transferencia espontánea de calor siempre ocurre de los cuerpos calientes a los más fríos, y que es imposible convertir el 100% de esta transferencia de energía en trabajo útil. Es por ello que no existe una máquina que tenga un rendimiento del 100%, y en mayor o menor medida, siempre existirán pérdidas por rozamientos, refrigeración…, en forma de calor residual que no podemos aprovechar. 
</li>
<li style="line-height: 12px; padding-left: 14px; text-indent: -14px; " class="full-width" value="2">
2.CLASIFICACIÓN DE LOS TIPOS DE ENERGÍA EN SIETE GRUPOS. 
</li>
<li style="line-height: 12px; padding-left: 25px; text-indent: -25px; " class="full-width">
2.1. Energía electromagnética: 
</li>
<li style="line-height: 12px; padding-left: 50px; text-indent: -50px; " class="full-width">
es aquella asociada a la radiación electromagnética, una forma de energía que no necesita la presencia de materia para su transporte, y que NO puede ser almacenada como tal, y existe únicamente como ondas viajando a la velocidad de la luz. 
</li>
<li style="line-height: 12px; padding-left: 25px; text-indent: -25px; " class="full-width">
2.2. Energía química: 
</li>
<li style="line-height: 12px; padding-left: 50px; text-indent: -50px; " class="full-width">
existe almacenada mediante los enlaces de las moléculas. Cuando se transforma (principalmente a energía térmica) se rompen estos enlaces y se libera energía. Pertenecen a este grupo derivados del petróleo, gas, biomasa… 
</li>
<li style="line-height: 12px; padding-left: 25px; text-indent: -25px; " class="full-width">
2.3. Energía nuclear: 
</li>
<li style="line-height: 12px; padding-left: 50px; text-indent: -50px; " class="full-width">
es otra forma de energía almacenada, y que se libera mediante la interacción de partículas con otras dentro del núcleo atómico. 
</li>
<li style="line-height: 12px; padding-left: 25px; text-indent: -25px; " class="full-width">
2.4. Energía mecánica: 
</li>
<li style="line-height: 12px; padding-left: 50px; text-indent: -50px; " class="full-width">
es aquella que se puede transformar directamente en trabajo (fuerza por desplazamiento). A su vez se divide en Potencial, aquella que posee un cuerpo en función de su posición en un campo de fuerzas (por ejemplo la gravedad en la Tierra), y la Cinética, aquella que posee un cuerpo por estar en movimiento relativo de translación, rotación u oscilación con respecto a otro. 
</li>
<li style="line-height: 12px; padding-left: 25px; text-indent: -25px; " class="full-width">
2.5. Energía interna: 
</li>
<li style="line-height: 12px; padding-left: 50px; text-indent: -50px; " class="full-width">
es un parámetro termodinámico del estado de una sustancia, y que contabiliza la energía cinética del movimiento de las moléculas, átomos y partículas subatómicas, y la energía potencial debida a su posición relativa. 
</li>
<li style="line-height: 12px; padding-left: 25px; text-indent: -25px; " class="full-width">
2.6. Energía térmica: 
</li>
<li style="line-height: 12px; padding-left: 50px; text-indent: -50px; " class="full-width">
ligada a la vibración atómica y molecular. Es una energía básica en la que todos los demás tipos pueden transformarse. Sin embargo, la transformación de energía térmica en otros tipos está seriamente limitada por el 2ª principio de la termodinámica como se explicó anteriormente. Más en concreto, el límite teórico máximo está limitado por el rendimiento del Ciclo de Carnot. 
</li>
<li style="line-height: 12px; padding-left: 25px; text-indent: -25px; " class="full-width">
2.7. Energía eléctrica: 
</li>
<li style="line-height: 12px; padding-left: 50px; text-indent: -50px; " class="full-width">
asociada al flujo o acumulación de electrones. Hay que mencionar que la energía eléctrica no existe como tal en forma de recursos naturales en la naturaleza. No obstante sus grandes ventajas son que pueden ser fácil y eficientemente convertidas a otras formas, y sobre todo, que puede ser transportada a largas distancias con pérdidas aceptablemente pequeñas. 
</li>
</ol>
3. UNIDADES DE ENERGÍA. 
<ol>
<li style="line-height: 12px; padding-left: 25px; text-indent: -25px; " class="full-width">
La energía se manifiesta realizando un trabajo. Por eso sus unidades son las mismas que las del trabajo. 
</li>
<li style="line-height: 12px; padding-left: 25px; text-indent: -25px; " class="full-width">
En el SI (Sistema Internacional de Unidades) la unidad de energía es el julio (o joule). Se define como el trabajo realizado cuando una fuerza de 1 newton desplaza su punto de aplicación 1 metro. 
</li>
<li style="line-height: 12px; padding-left: 25px; text-indent: -25px; " class="full-width">
En la vida corriente es frecuente usar la caloría. 1 Kcal = 4,186 · 103 julios. Las Calorías con las que se mide el poder energético de los alimentos son en realidad Kilocalorías (mil calorías). 
</li>
<li style="line-height: 12px; padding-left: 25px; text-indent: -25px; " class="full-width">
Para la energía eléctrica se usa el kilovatio-hora. Es el trabajo que realiza una máquina cuya potencia es de 1 KW durante 1 hora. 1 KW-h = 36·105 J. Es muy frecuente la confusión entre KW (unidad de potencia) con KW-h. 
</li>
<li style="line-height: 12px; padding-left: 25px; text-indent: -25px; " class="full-width">
Cuando se estudian los combustibles fósiles como fuente de energía se usan dos unidades: 
</li>
<li style="line-height: 12px; padding-left: 60px; text-indent: -10px; " class="full-width">
•tec (tonelada equivalente de carbón): es la energía liberada por la combustión de 1 tonelada de carbón (hulla) 1 tec = 29,3 · 109 J 
</li>
<li style="line-height: 12px; padding-left: 60px; text-indent: -10px; " class="full-width">
•tep (tonelada equivalente de petróleo): es la energía liberada por la combustión de 1 tonelada de crudo de petróleo. 1 tep = 41,84 · 109 J 
</li>
<li style="line-height: 12px; padding-left: 25px; text-indent: -25px; " class="full-width">
No obstante, existen infinidad de unidades en la industria (m3 de petróleo, BTU, CV-h, termias…), la mayoría de las veces por razones tradicionales. Ello conlleva un gran problema a la hora de comparar balances energéticos entre los distintos tipos de energía, procesos industriales, motores…, por eso es recomendable prestar siempre atención especial al tipo de unidades que manejamos. 
</li>
<li style="line-height: 12px; padding-left: 14px; text-indent: -14px; " class="full-width" value="4">
4.FUENTES DE ENERGÍA Y RECURSOS ENERGÉTICOS. 
</li>
<li style="line-height: 12px; padding-left: 25px; text-indent: -25px; " class="full-width">
Entendemos por fuente de energía aquella capaz de suministrar energía, y por recurso de un tipo de energía a aquella cantidad disponible. La cuestión principal es poseer energía utilizable y lo más fácil de obtener posible. La radiación solar que recibe la Tierra supone de 15 a 20 veces la energía total contenida en todas las reservas de combustibles fósiles del mundo. Un aprovechamiento del 0,005% de la radiación anual bastaría para proporcionar toda la energía que consume el hombre. El gran reto es ser capaz de aprovecharla, y sobre todo de almacenarla. 
</li>
<li style="line-height: 12px; padding-left: 25px; text-indent: -25px; " class="full-width">
Se dividen las fuentes de energía en Renovables (solar, hidráulica, eólica, biomasa, de las olas, de las mareas y geotérmica), que son aquellas aparentemente inagotables, y en No Renovables (carbón, petróleo, gas natural y combustibles nucleares fisibles), aquellas que su consumo es muchísimo mayor que el tiempo necesario para su formación. 
</li>
<li style="line-height: 12px; padding-left: 25px; text-indent: -25px; " class="full-width">
Igualmente se puede hablar de energía concentrada (petróleo, carbón…) y de energía difusa (solar, eólica…). En general, cuanto más concentrado está un recurso energético, menos renovable es. 
</li>
</ol>
 
 
 
Fundación Axencia Intemunicipal da Enerxía de Vigo. 
C/ Elduayen 36 - 4º 36202 Vigo. Telf.: 986 443 476 
<a class="class1" href="mailto:infoatfaimevi.eu" title="mailto:infoatfaimevi.eu">infoatfaimevi.eu</a> - <a title="http://www.faimevi.eu" class="class2" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://www.faimevi.eu">www.faimevi.eu</a>
</div>
</div>
</div>
<div style="height: 1449px; line-height: 1449px; " class="spacer"> </div>
</div>
<div style="height: 0px; padding-bottom: 20px; line-height: 0px; margin-left: 0px; position: relative; width: 570px; z-index: 15; " id="footer_layer">
<div style="height: 0px; padding-bottom: 20px; line-height: 0px; " class="bumper"> </div>
</div>
</div>
</div>
</body>
</html>

sticks464 · Joined: 31 Dec 2006 Posts: 2625

Increase the height of the spacer div until all elements become visible. Remove previous paddings applied as they did no good.