Do you have a question? Post it now! No Registration Necessary. Now with pictures!
- Berlin Brown
April 4, 2008, 10:45 pm
rate this thread
Frameset -> Page -> IFrame -> Frameset ...issue with scroll bars
This is my layout.
I have a page (homepage) within in a Frame<*,0>. Hidden frame is 0.
This homepage contains an iframe (called bottom).
The iframe href and by default contains a blank page, is set by
The iframe normally contains frameset page (leftnav and body content).
Here is the question. There is an issue with the bottom iframe.
The body content seems to overflow past the bottom of the status bar
by about 100 pixels. For example, if you scroll to the bottom, it
looks like there are about 30 pixels overflowing past the status bar.
That right vertical scroll bar gets clipped.
I know what the issue is. The "homepage" contains a navigation menu
system. It is about 70-100 pixels in height. This is pushing down
the iframe. So, now the iframe is 70 pixels to large.
** Possible Solutions with Issue Number 1.
1. Calculate the exact pixel height of bottom iframe and subtract
about 70 pixels from the height so that it all fits in the screen.
I hate to do this because I know that the calculations will be off if
the user resizes. For example.:
var s1 = screen.availHeight
bottom.height = s1 - 70;
I also tried a percentage.
bottom.height = "90%";
These are ok, but it never looks right. There is either some
whitespace under where the scrollbar is or the scroll bar overflows
beyond where the status bar is.
** Possible Solution Number 2
1. Play with the margin-bottom so that the iframe gets pushed up so
that the scroll bar is fully visible.
I tried this, but margin-bottom seems to be ignored by IE and firefox
if the margin is not visible? E.g. because the page overflows past
the bottom of the screen, I guess these browser dont' worry about the
margin-bottom because there isn't one visible?
*** Issue number 2
With the same layout described above. It looks like the iframe
disappears when you tab at that particular iframe. If I tab into the
iframe, the iframe content is only visible and then if tab out of the
iframe, the rest of the page is visible again.
So, it looks like the outside page (homepage) disappears.
*** Pseudo code
<div style="width:auto; height:auto;">
<iframe src="empty" id="thebottom" name="thebottom" scrolling="auto"
frameborder="0" width="100%" height="100%"></iframe>
I wonder if this is because I have height=100%?