CODEWITHSUNDEEP
htmlcssiframe
elrado88
elrado88

Reputation: 75

Double vertical scrollbars are showing on iFrame page

I have an index page that includes both a left and a right iFrame. For some reason on the second iFrame it shows a scroll bar for its iFrame and another scroll bar for the whole page.

I have been trying to remove the scroll bar for the whole page and just leave the scroll bars for the 2 iFrames only

When I go and change the css property to overflow hidden for the body,html element it also removes the scroll bar for both iFrams

I have even tried to set the iFrame element overflow-y: to auto and the body,html overflow to hidden.

That still didn't work.

The second issue I am having is that the iFrame does not extend all the way to the bottom of the page even when I specified the height to be a 100% .

I have been fiddling with the CSS but go no luck so far. I would appreciate it if anyone can try to help me out.

Below is the link to my webpage, and the css snippet. Thank you!!!

html,body{ height: 100%; margin:0;padding:0; }
iframe{
    height:100%; margin:0;padding:0; border: 0;
}

http://15c04752.ngrok.com/simplemenu/menus/demo (Text might be rendered smaller in different browsers please hit ctrl+ cmd+ on your keyboard to get the scrolling to show)

Upvotes: 1

Views: 5619

Answers (2)

dywatt
dywatt

Reputation: 1

I had a similar issue when using an iframe. The element containing the iframe was not long enough to justify a second scrollbar; its just a youtube video taking up about 600 pixels in height so I did not need a second scrollbar. The fix for me was just html, body { height: 100%; } in CSS. If that doesn't help my next best guess is to use webkit to just visibly hide them if all else fails.

Upvotes: 0

Darek Kay
Darek Kay

Reputation: 16689

To remove the scrollbar for the whole page, add this rule:

    body, html {
        overflow: hidden;
    }

To enable scrollbars on the iframes, add this attribute:

<iframe ... scrolling="yes"></iframe>

Source

And that's how it looks like, if you add both:

enter image description here

There is no scrollbar for the whole page, no scrollbar for the left iframe (because the content is fully visible) and a scrollbar for the right iframe (because the content is not fully visible). If you make the windows smaller, the scrollbar for the left iframe will appear.

Upvotes: 1

Related Questions