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

Question

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

Answer 1

The requirements are clear:

1. There is a menu bar above the iframe, due to which the iframe doesn't seem to be able to scroll fully down to the bottom of the framed page.
2. The window scrollbar must be hidden but not the iframe scrollbar.

My solution is very simple:

1. Hide the window scrollbar with overflow:hidden;.
2. Give the iframe height not the usual 100% but 100% minus the height of the menu and/or whatever header is above the iframe. I will assume that the menu/header takes up 20% of the total height, but since it usually will be of a fixed height, one can perhaps best calculate it in CSS3 as height: calc ( 100% - 120px );. The wrapper around the iframe can be a div or a table with a width 100% and a height 100%.

Here is my example with the iframe height set to 80% (of the window):

styling:

body {
    overflow: hidden;
}
#hold_my_iframe {
    padding:0px; margin:0 auto; width: 100%; height: 100%; overflow:scroll;
}

html: