View Full Version : Iframes 100%

05-28-2004, 01:30 AM
What I would like to do is to take my IFRAMES and make them 100% height based on the page they contain, I thought maybe there might be a JavaScript code to do this since all the HTML code or CSS Code I've tried doesn't work.

05-28-2004, 01:40 AM
try and go




then try the iframe as

<iframe src="page.htm" height="100%" width="100%"></iframe>

05-28-2004, 04:48 AM
Thanks for all your help but it took me almost all night but I found something on the net, it works very well, the one you told me I tried it and it didn't work:

In the main page that has the Iframe you put this:
<script type="text/javascript">
/************************************************** ***********************
This code is from Dynamic Web Coding at http://www.dyn-web.com/
See Terms of Use at http://www.dyn-web.com/bus/terms.html
regarding conditions under which you may use this code.
This notice must be retained in the code as is!
************************************************** ***********************/

function getDocHeight(doc) {
var docHt = 0, sh, oh;
if (doc.height) docHt = doc.height;
else if (doc.body) {
if (doc.body.scrollHeight) docHt = sh = doc.body.scrollHeight;
if (doc.body.offsetHeight) docHt = oh = doc.body.offsetHeight;
if (sh && oh) docHt = Math.max(sh, oh);
return docHt;

function setIframeHeight(iframeName) {
var iframeWin = window.frames[iframeName];
var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
if ( iframeEl && iframeWin ) {
iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
var docHt = getDocHeight(iframeWin.document);
// need to add to height to be sure it will all show
if (docHt) iframeEl.style.height = docHt + 30 + "px";

function loadIframe(iframeName, url) {
if ( window.frames[iframeName] ) {
window.frames[iframeName].location = url;
return false;
else return true;
</script>That goes in the head of the doc, then this is put in every link, like this, example:
<a href="doc.html" onclick="return loadIframe('main', this.href)">The onclick is the thing that reloads the doc and tells it what name of iframe to use, but I have found out this onclick is not necesary, just use the normal target="framename", now in each document that you want to load inside the iframe:
<script type="text/javascript">
function goSetHeight() {
if (parent == window) return;
// arg: id of iframe element this doc is to be loaded into
else parent.setIframeHeight('main');
</script>That's inside the head part of the docs then this is added to the body part like this:
<body onload="goSetHeight()">If you can think of something else that's smaller let me know.