Any iFrame fluid height trickery?

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Any iFrame fluid height trickery?

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> Any iFrame fluid height trickery?

Page: [1]

rubyaim

Posts: 757
Joined: 6/22/2005
Status: offline

Any iFrame fluid height trickery? - 1/17/2007 18:48:44

Hi all, I've been faffing about with an iFrame on and off for a few days. I'd like to get the height fluid, rather than fixed. Have done countless searches and could not really find anything that worked - the most obvious was setting the height to 100% and the containing div to 100%.

Before I give up entirely I thought I'd post here and ask

It's probably not really possible.

Code below (sorry the page is not live). I'd like the iFrame height to expand and contract when people increase the text size, or if the content to the left increases or decreases.

Note - this code is still in 'faffing about' mode and I've removed non-relevant stuff

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1252" />
<title>test iframe</title>

<style type="text/css">
body {
font:80% Verdana,Arial,Tahoma,sans-serif;
background:#ffffec;
margin:20px;
padding:0;
}

h1,h2,h3,h4,h5 {
font-size:1.3em;
font-weight:bold;
text-align:left;
margin:0;
padding-left:10px;
}

p {
padding-left:10px;
padding-right:10px;
}

#content {
background:#ffffff;
color:#000;
width:97%;
margin:0 auto;
border: 1px dotted #006600;
padding: 10px;
overflow:hidden;
}

div.contentleft {
width:48%;
float:left;
padding-top:3px;
padding-left:2px;
padding-right:5px;
text-align:left;
margin:0 auto -1px;
}

div.contentright {
float:right;
padding-top:3px;
padding-right:10px;
padding-left:2px;
width:48%;
text-align:left;
}

iframe.randd {
float:right;
border:1px dotted #006600;
width:97%;
/*I would like to set a fluid height on this iframe*/
height:420px;
margin:0;
padding:0;
}
</style>

</head>

<body>

<div id="content">
<!-- pretty header stuff and hor nav list -->

<div class="contentleft">

<h2>Baa, baa, black sheep</h2>
<p>Have you any wool? Yes sir, yes sir, Three bags full;
One for the master, And one for the dame, And one for the little boy Who lives 
down the lane. Have you any wool? Yes sir, yes sir, Three bags full; One for the 
master, And one for the dame, And one for the little boy Who lives down the 
lane.</p>

<h3>Hey, diddle, diddle</h3>
<p>The cat and the fiddle, The cow jumped over the moon. The little dog laughed 
To see such sport, And the dish ran away with the spoon. The cat and the fiddle, 
The cow jumped over the moon. The little dog laughed To see such sport, And the 
dish ran away with the spoon.</p>

<h4>I had a little nut tree</h4>
<p>Nothing would it bear, But a silver nutmeg and a golden pear. The King of 
Spain's daughter came to visit me, And all for the sake of my little nut tree. I 
skipped over water, I danced over sea, And all the birds in the air couldn't 
catch me.</p>

<h5>Cobbler, cobbler</h5>
<p>Mend my shoe. Get it done by half past two. Half past two is much too late! 
Get it done by half past eight. Cobbler, cobbler, mend my shoe. Get it done by 
half past two. Half past two is much too late! Get it done by half past eight.</p>

</div>

<div class="contentright">

<p>Staff Notices</p>

<iframe frameborder="0" class="randd" name="rdstaffnotes" title="Research and Development Staff Notes List" src="main-intranet">
To view the content of this iFrame go to <a href="main-intranet">Research and Development Staff Notes List</a>
</iframe>

</div>

<!-- Footer -->

</div>

</body>
</html>

_____________________________

Sally


rdouglass Posts: 9136 From: Biddeford, ME USA Status: offline	RE: Any iFrame fluid height trickery? - 1/17/2007 20:42:53 quote: <div class="contentright"> <p>Staff Notices</p> <iframe frameborder="0" class="randd" name="rdstaffnotes" title="Research and Development Staff Notes List" src="main-intranet"> To view the content of this iFrame go to <a href="main-intranet">Research and Development Staff Notes List</a> </iframe> </div> I have no idea if this will work and will probably require some experimentation but I frequently have luck putting things inside a 'wrapper' div and cheat by defining the wrapper size and defining the content div to fill the wrapper: <div id="wrapper"> <div class="contentright"> <p>Staff Notices</p> <iframe frameborder="0" class="randd" name="rdstaffnotes" title="Research and Development Staff Notes List" src="main-intranet"> To view the content of this iFrame go to <a href="main-intranet">Research and Development Staff Notes List</a> </iframe> </div> </div> Try making the #wrapper CSS do what you want and then give the .contentright CSS a 2px margin (or some other appropriate distance). Maybe something like this: #outer_wrapper { min-width:400px; width:auto !important; width:100%; min-height:300px; height:auto !important; height:100%; } .contentright { margin:2px; } Haven't actually tried it with an iframe but that's how I'd attempt it. That any help? _____________________________ Don't take you're eye off your final destination. ASP Checkbox Function Tutorial. (in reply to rubyaim)


rubyaim Posts: 757 Joined: 6/22/2005 Status: offline	RE: Any iFrame fluid height trickery? - 1/17/2007 22:41:14 Many thanks Roger While that did not work in itself, it did turn a light bulb on after experimenting. I managed to knock the iFrame itself into shape using: iframe.randd { float:right; border:1px dotted #006600; margin:0; padding:0; width:97%; height: expression(parseInt(document.body.offsetHeight)-(75+20)) } Good points: - iFrame height resizes when text is resized - iFrame resizes when content at left changes Bad points: - IE only (not a big deal for me in this instance but I try to avoid IE only things) - CSS Error (height parse) - Not elegant - I killed IE several times when trying to get it right Am not sure if it will work with IE 7, will have to check later. I've tried searching for more elegant javascript solutions that are cross browser friendly but have had no luck so far. In the end I'll probably just use a fixed height, but keep exploring other options. _____________________________ Sally (in reply to rdouglass)


rdouglass Posts: 9136 From: Biddeford, ME USA Status: offline	RE: Any iFrame fluid height trickery? - 1/17/2007 22:50:17 quote: I'll probably just use a fixed height Maybe fixed with overflow:auto? _____________________________ Don't take you're eye off your final destination. ASP Checkbox Function Tutorial. (in reply to rubyaim)


rubyaim Posts: 757 Joined: 6/22/2005 Status: offline	RE: Any iFrame fluid height trickery? - 1/17/2007 23:06:47 That's a good idea I wonder why iFrame height is so difficult to deal with? In this case an iFrame is about the only solution I can think of as the content page comes from a different server. Using MSXML crossed my mind but I decided it was not really worth it. _____________________________ Sally (in reply to rdouglass)


rubyaim Posts: 757 Joined: 6/22/2005 Status: offline	RE: Any iFrame fluid height trickery? - 1/17/2007 23:30:04 To see if it would make things easier, I change the iFrame to an Object and the doc type to strict. It behaved exactly as the iFrame did with the height - I figured that was a long shot _____________________________ Sally (in reply to rubyaim)

mosdeft

Posts: 1
Joined: 1/16/2008
Status: offline

RE: Any iFrame fluid height trickery? - 1/16/2008 23:45:17

here's a simple solution to the problem

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>title</title>
    <style>
        body{
			margin:0;
			overflow: hidden; 
			background-color: #000000;
		}
		iframe {
			height: 100%;
			width: 100%;
			overflow-x: hidden;
		}
    </style>
</head>
<body>
    <iframe src="http://www.example.com" frameborder="0"></iframe>
</body>
</html>

hope this helps!

(in reply to rubyaim)