How would I make this iframe lose its borders/scrollbars and resize to fit a DIV?

I've tried what other people have said and it doesn't seem to work. Could you possibly code it yourself? I'm开发者_如何学编程 really frustrated.

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<iframe src=\'test.html\'></iframe>'">Computing</a>

Here is the place I would like it:

http://markbrewerton.co.uk/work.html#computing

Use a CSS rule like this to make the iframe fill it's parent and have no border:

#MainBack iframe { width: 100%; height: 100%; border: none; }

Internet Explorer doesn't respect the border setting, so you also need to set the frameborder attribute in the tag:

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<iframe src=&quot;test.html&quot; frameborder=&quot;0&quot;></iframe>'">Computing</a>

HTML

<iframe src="" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

CSS

border:none;
overflow:hidden;
width:450px;
height:35px;"

Allowtransparecy is used in IE otherwise you'll see a background different from the page background..

EDIT: added the escaped version

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<iframe src=\'http://www.google.com\'  scrolling=\'no\' frameborder=\'0\' allowtransparency=\'true\'></iframe>'">Computing</a>    
<div id="MainBack"></div>