stu stu - 2 years ago 116
CSS Question

How to get rid of the double scroll bar problem when using an iframe

I've seen this problem on the web, and all the suggested solutions aren't working for me, so I thought I'd come here.
I have a page that has an iframe. The top of the page is a dropdown menu, the rest of the page is the iframe. The idea like I'm sure everybody else does, is to have the menu stay stationary and the menu selection runs an application in the iframe. The contents of the iframe should scroll, but the page as a whole should not.
I've tried putting the iframe

inside a single table element also with
but I get two scrollbars if I make the window too short vertically.

Any suggestions?

I think I didn't explain myself well. I want to keep the scroll bar in the iframe as auto, but I don't ever want a scroll bar for the whole page.
I need the iframe to size appropriately so it always takes up exactly the remainder of the page so the browser doesn't have to make a scroll bar because the iframe should never extend off the bottom of the viewing area.

Answer Source




<table border=0 cellspacing=0 cellpadding=0 id="hold_my_iframe">
    <iframe src="" width=100% height=100% marginwidth=0 marginheight=0 frameborder=0></iframe>


* { margin:0 padding:0 }
body { margin:0; padding:0; text-align:center }  
#hold_my_iframe { padding:0px; margin:0 auto; width:100%; height:100% }

NOTE: I have finally understood what you want! Use table tag instead of a div tag as container! See the demo and enjoy it!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download