View Full Version : Automatically adjust Iframe height?

01-27-2013, 01:08 PM
Hi guys,

I've created a dropdown which will show different forms when each button is clicked. They work correctly but the iframe height won't set at 100%.

I'm currently using this:

<button class='button_$form[form_id]'>Show</button> $form[name]<div id='job_".$form[form_id]."'><iframe src='jobs.php?id=$form[form_id]' width='100%' scrolling='no'></iframe></div>

Each forms height will be different so I can't just set it at (x)px. What's the best way to do this?

Thanks :)

01-27-2013, 04:20 PM
You might need to fool around with the '-15' thingy a bit, but this worked for me in firefox. The getDocHeight() is so it works in all browsers and was the bane of trying to get this to work:

<!DOCTYPE html>

<body onload="resizeIframe();">
<iframe id="myframe" src='http://www.yahoo.com/' width='100%'></iframe>

<script type="text/javascript">
function resizeIframe() {
document.getElementById('myframe').style.height = getDocHeight() - 15 + 'px';

function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)