Any iFrame fluid height trickery? (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

rubyaim -> 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>




rdouglass -> 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?



rubyaim -> 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 [:o]

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.



rdouglass -> 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?



rubyaim -> 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.



rubyaim -> 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 [8|]




mosdeft -> 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!



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625