Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations sizbut on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Frames + Height 100% 1

Status
Not open for further replies.
foxymorons

foxymorons

Technical User
Aug 3, 2004
27
AU
Firstly I used inline frames but as they didnt accept the 100% height option, it was very hard.

I have had to resort to learning CSS and use their version of a frame with the overflow property. I can get the width etc to work. But how do I get the height of the CSS frame window to expand with the pages certain content. Depending on how long the page is, that is how i want the frame to work.

This is what I have.

#menu {
position: absolute;
left: 363px;
padding: 0px;
width: 636px;
overflow:auto;
height: 605px;
top: 130px;
}

And height: 100% does not work.

Any suggestions?

Thanks in advance.
 
Sort by date Sort by votes
to set height to 100%:
in the file that is called in the iframe at then end of </html>:
<script>
resizeTo(sreen.width-20,screen.height-60)
</script>


the calcluations that i have done are very rough, u should perfect it...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
That didnt seem to work.

Do you mind if I PM you the website, so you can have a look at whats going wrong?

Thanks
 
Upvote 0 Downvote
just give me that page that is calling the iframe and the iframe page itself...

id: xara@rediffmail.com

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote

Can you spare a thought for other people who may be experiencing the same problem and keep posting to the thread rather than taking this to private emails, please?

This isn't a meeting post - it's a forum for learning, solving problems, and sharing knowledge.

Dan
 
Upvote 0 Downvote
he's right u know...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
yep, thats cool!

if you can help solve my problem, I will post the answer and the solution ASAP!

so that everybody knows, as this seems to be a huge problem!

thanks!
 
Upvote 0 Downvote
post it...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote

foxymorons,

If you can post the web address then we will all be able to take a look. Many hands make light work!

Dan
 
Upvote 0 Downvote

Well - I'm not 100% if this is the correct solution or not - it seems to work for me, but see what you think anyway.

Your style expression won't work, as it evaluates before the content has loaded in the iframe. However, you cannot use the "resizeTo" to resize an iframe (AFAIK). This is how to get around that.

In your iframe code body tag (experiment.htm), add a handler that calls a method in the parent window once the content has loaded:

Code: 
<body onload="parent.resizeIframe();">

and then in the parent window, add a JS function called "resizeIframe" that does the resizing:

Code: 
function resizeIframe() {
	var myIframe = document.getElementById('myframe');
	myIframe.style.height = myIframe.document.body.scrollHeight;
}

This will work, as the content would have loaded. You can now remove the "iframe" style expression altogether.

Hope this helps,
Dan
 
Upvote 0 Downvote
I hate to dredge this thread back up, but is there a way to achieve the same effect when the page referenced by the iframe is on a different server? (the method above results in a permission denied error)
 
Upvote 0 Downvote
Thanks, Dan, that's just what I needed for an iframe problem under IE. Can't believe you didn't get a star for it until now.

A question: my iframe tag had a height of 100%, but that resulted in really tall frames (even though the contents are no where near that tall). Removing the height fixes that mostly (it's still too tall, but not by so much), but every time a click a link that changes the contents of that iframe, the iframe grows taller and taller, eventually to absurd heights (about double the contents' height in 3 or 4 clicks).

I can see why this is: if it overestimates the first time, it's just adding that overestimation onto the total height after every click. I don't see why it overestimates, though... any thoughts? In this case it's IE6.
 
Upvote 0 Downvote
I found that setting it to 80% height roughly works, though after enough clicks it stops function. But that seems to be 27 clicks (reloads of the iframe), which in this application is a pretty high number.

For anyone who stumbles into this later, that code change looks like this:
Code: 
function resizeIframe() {
    var myIframe = document.getElementById('myframe');
    myIframe.style.height = myIframe.document.body.scrollHeight [red]* 0.8[/red];
}
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
805
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
631
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
682
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
218
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top