Iframe inside DIV, how to make div stretch?

Hello all, I have a problem with my website.

I want to include an iframe inside one of my divs, but i want this iframe to stretch without the need of scrollbars, seeing as the iframe is a forum page, the page will have different heights on topics, etc.

I just want my div (or Iframe?) to stretch according to the content inside.

here is the html and css:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Santa Maria - Horde - Hellfire EU</title>
<meta name="Description" content="Website for the raiding guild Santa Maria">
<meta name="Keywords" content="Santa Maria guild wow World of Warcraft late night raiding">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link rel="icon" href="images/favicon.ico.bmp">
</head>

<body>
<div class="h1" id="topbar"><a href="http://cudamine.com/santa-maria/">News</a> <a href="http://cudamine.com/santa-maria/forum/">Forum</a> <a href="http://cudamine.com/santa-maria/phpraider/">RaidSignup</a> <a href="http://cudamine.com/santa-maria/eqdkp/">DKP</a> <a href="http://cudamine.com/santa-maria/videos.php">Videos</a></div>
<div id="logoarea"></div>
<div id="header"></div>
<div id="mainforum" div class="h1">
<iframe src ="http://www.cudamine.com/santa-maria/forum1/index.php" width="100%" height="100%" frameborder="0"></iframe>
</div>
<div id="footer"></div>
<div id="vent">
<script type="text/javascript" src="http://view.light-speed.com/ventrilo.php?IP=eurovent1.gameservers.com&PORT=4329&CHANNEL_WNOUSER=YES&FONTSIZE=10&CONLINK=YES&HELP=NO&WIDTH=8%&BGCOLOR=101010 filter:alpha(opacity=70); opacity: 0.7;&STYLE=2&SHOW_IP_PORT=NO&SN_BGCOLOR=101010&SN_COLOR=eaeaea&INFO_BGCOLOR=101010&INFO_COLOR=eaeaea&HELP_BGCOLOR=101010&HELP_COLOR=000000&CHANNEL_BGCOLOR=CCCCCC&CHANNEL_COLOR=eaeaea&UN=eaeaea&UN_BG=FFFFFF&METHOD=js"></script>
</div>
<div id="progress"><center><a href="http://www.wowprogress.com/"><img alt="WoW Guild Rankings" src="http://www.wowprogress.com/guild_img/367370/out/type.site" border="0"/></a></center></div>
</body>
</html>

here is the css:


html {
    overflow: -moz-scrollbars-vertical !important;
	height: 100%
}

body {
	background-color:#1a1a1a;
	background-image:url(images/bg.jpg);
	background-repeat:no-repeat;
	width:100%;
	height:100%;
}

a { text-decoration: none; color: #CCCCCC;}
a img { border: none;}
a:link { text-decoration: none; color: #c30000; }
a:hover {text-decoration: none; color: #EBEBEB; }
a:visited { text-decoration: none; color: #c30000; }

#topbar {
	top:0;
	left:0;
	background-color:#000;
	width:100%;
	height:20px;
	position:absolute;
	text-align:center;
	word-spacing: 40px;
}

#logoarea {
	top:30px;
	left:0;
	background-image:url(images/bgs.png);
	width:100%;
	height:180px;
	position:absolute;
	border-top:1px solid #383838;
	border-bottom:1px solid #383838;
}

#about {
	top:120px;
	left:7.5%;
	background-image:url(images/bgs.png);
	width:70%;
	height:60px;
	position:relative;
	margin-left: auto;
    margin-right: auto;
	border:1px solid #383838;
	padding-top:28px;
	padding-left:25px;
	padding-bottom:25px;
	padding-right:25px;
}

#aboutus {
	top:230px;
	left:0;
	width:207px;
	height:35px;
	position:absolute;
	margin-left: 24.5%;
	background-image:url(images/about.png);
	z-index:1;
}

#header {
	top:45px;
	left:0;
	width:549px;	
	height:120px;
	position:relative;
	background-image:url(images/logo.png);
	margin-left: auto;
    margin-right: auto;
}

#vent {
	top:485px;
	left:0;
	background-image:url(images/bgs.png);
	width:14%;
	position:absolute;
	margin-left:10px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
	padding-top:10px;
	border:1px solid #383838;
}

#progress {
	top:248px;
	left:0;
	background-image:url(images/bgs.png);
	width:14%;
	position:absolute;
	margin-left:10px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
	padding-top:10px;
	border:1px solid #383838;
}

#main {
	top:140px;
	left:7.5%;
	background-image:url(images/bgs.png);
	width:70%;
	height:100%;
	position:relative;
	margin-left: auto;
    margin-right: auto;
	padding-top:20px;
	padding-left:25px;
	padding-bottom:15px;
	padding-right:25px;
	border:1px solid #383838;
}

#mainforum {
	top:120px;
	left:7.5%;
	background-image:url(images/bgs.png);
	width:70%;
	height:auto;
	position:relative;
	margin-left: auto;
    margin-right: auto;
	padding-top:20px;
	padding-left:25px;
	padding-bottom:15px;
	padding-right:25px;
	border:1px solid #383838;
}

#footer {
	top: 150px;
	left:0;
	width:60%;
	height:20px;
	position:relative;
	margin-left: auto;
    margin-right: auto;
}

#newsline {
	border-bottom:1px solid #9a9a9a;
}

.h1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#eaeaea;
	padding-top: 4px;
}

.h2 {
	margin: 0px;
	padding: 0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#eaeaea;
}

.h3 {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#c30000;
	padding-top: 4px;
}

.h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:30px;
	color:#c30000;
}

Any help is welcome.

I don’t think it’s possible unless you manually set a pixel height on the iframe…or you use javascript

This code has to be in the iframe’d page

function resizeIframe(iframeID) {
if(self==parent) return false; /* Checks that page is in iframe. */
else if(document.getElementById&&document.all) /* Sniffs for IE5+.*/

var FramePageHeight = framePage.scrollHeight + 10; /* framePage
is the ID of the framed page's BODY tag. The added 10 pixels prevent an
unnecessary scrollbar. */

parent.document.getElementById(iframeID).style.height=FramePageHeight;
/* "iframeID" is the ID of the inline frame in the parent page. */
}

...

<body id="framePage" onload="resizeIframe('idTopFrame')">

http://www.frontpagewebmaster.com/m-89000/tm.htm

Think I’ll just give up on this one…

I’ve tried countless things, nothing seems to fit, setting it by pixel is by far the best option, but it’s not actually a proper option.

I’ll see if I can edit the forum template or something.

Googling “auto height iframe” gets lots of discussions. Here is a jQuery plugin that does it http://www.lost-in-code.com/programming/jquery-auto-iframe-height/

Is height 100% an option? Not sure what happens after 100% though without testing it (don’t use them much).

He had 100% height set on the iframe, but he had a div wrapped around it and the div had no height set so the 100% height had no effect Eric :).

You gave me an idea though Eric thanks :). Set 100% height on the surrounding div and see what happens (I can’t since you took the forum page off, but it makes hte iframe a lot bigger at least, perhaps it’s big enough)

#mainforum {
	top:120px;
	left:7.5%;
	background-image:url(images/bgs.png);
	width:70%;
	[b]height:100%;[/b]
	position:relative;
	margin-left: auto;
    margin-right: auto;
	padding-top:20px;
	padding-left:25px;
	padding-bottom:15px;
	padding-right:25px;
	border:1px solid #383838;
}

Thats what I tried the first time, it simply doesn’t work.

I tried this jquerry thing (im very noob at this btw), but now i cant even see anything lol.

This is what I did:


<div id="mainforum" div class="h1">
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="jquery.autoheight.js">
<iframe class="autoHeight" scrolling="auto" frameborder="0" src="http://cudamine.com/santa-maria/forumsmf/index.php?action=forum"></iframe>
</script>
</script>
</div>

Both jquerry.js and jquery.autoheight.js are in the directory…

You need to take the iframe out from within the script tags. And from the jquery plugin tut…

UPDATE : Please note that this jQuery autoHeight plugin will not work with iFrames accessing content from a different domain or remote location since the window object originating from a different domain cannot be accessed from the current one due to JavaScript security restrictions.

WOOO

I finally got it to work!!

But now some of my divs have moved and are in the way! Any way to fix this?

cudamine.com/santa-maria/forum.php

Can you be a bit more specific? We don’t know what it looked like before :slight_smile: (memory)

I mean the vent and progress divs, the 2 divs in the left of the forum. I basically just want them to stick there.

I just put up a position:fixed, but it’s not exactly what i want, I just want them to stick at the top without moving as I scroll.

Problem is, absolute position moves them inside the forum div for some reason :(.

ok, as it is now, the vent info div moves as i scroll, i don’t really want this to happen. but as i said, absolute and all the other positions don’t work.

I still don’t understand you. I assume you mean #vent1

#vent1 {
background-image:url(images/bgs.png);
border:1px solid #383838;
left:0;
margin-left:10px;
padding:10px;
position:fixed;
top:248px;
width:14&#37;;
}

You fix it in place so when you scroll it doesn’t move.

Yes thats vent1 i mean.

I created another vent div (vent1) jsut for the forum page, if you click the Videos link at the top you can see what i mean, that vent div does not move as I scroll since absolute positioning works there.

But the iframe on the forum page seems to mess with anything that is related to absolute position, so to temporary fix it I created vent1 JUST for this forum page, with a fixed positioned, I only set it as fixed as its the closest thing i have to what i want, what i really want is for that div to not follow the page as i scroll, but instead, just stay at the top of the page JUST like in the video page.

This is as clear as i can be, sorry :(…