Question

I’m building a web page where i need to make different sections and i want the page to adjust height to the section that is beeing viewed in a certain moment.
Which is the best way to achieve this?
I was trying to do it with iframes and target opening

    <a href="/example" target="myframe">

but i cant make the iframe adjust to the content beeing displayed.

Any help would be aprecciated!
Thanks in advance

What i want is a window to unfold from the bottom of the page whenever someone clicks on “more info”.
I thought i could achieve it with an iframe

Answer 1

I found this solution and it solved my problem perfectly! It even has the option to rezise width.

<script type='text/javascript'>

function setIframeHeight( iframeId ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
{
var ifDoc, ifRef = document.getElementById( iframeId );

 try
 {   
 ifDoc = ifRef.contentWindow.document.documentElement;  
 }
 catch( e )
 { 
  try
  { 
   ifDoc = ifRef.contentDocument.documentElement;  
  }
  catch(ee)
  {   
  }  
 }

 if( ifDoc )
 {
  ifRef.height = 1;  
  ifRef.height = ifDoc.scrollHeight;

  /* For width resize, enable below.  */

  // ifRef.width = 1;
  // ifRef.width = ifDoc.scrollWidth; 
 }
}

</script>

<iframe id = "myIframe"  onload = "setIframeHeight( this.id )">

I found it here: http://www.sitepoint.com/forums/showthread.php?747398-IFRAME-Auto-Height