CODEWITHSUNDEEP
htmlcss
abcid d
abcid d

Reputation: 2953

HTML iframe - Double Scrolling Bars

I set up a iframe like below

<iframe src="http://www.bbc.com/" frameborder="0" width="100%"></iframe>

CSS

iframe { overflow:hidden;
         min-height:600px}

2 horizontal scrolling bars appear, 1 is at the iframe and the other is at the browser.

I want to get rid of the bar at iframe, I try

<iframe src="yahoo.com" scrolling="no" frameborder="0" width="100%"></iframe>

Then the scrolling bar at the iframe disappeared, and the problem is I cannot see anything at the bottom of BBC website!

I could increase min-height to greater number to cover entire length of BBC's page, but sometimes the page is very short and I'll get a huge white space at the bottom! So that increase the min-height is not a good practice.

How can I remove the scrolling bar at the iframe and use the browser's scrolling bar to navigate the page up and down?

Thank you!

Upvotes: 0

Views: 7494

Answers (2)

wedad
wedad

Reputation: 1

<iframe 
    src="http://maroof.sa/Business/GetStamp?bid=203783" 
    style=" width: auto; height: 250px; overflow-y:hidden;  "  
    frameborder="0" 
    seamless='seamless' 
    scrollable="no">
</iframe>

Upvotes: 0

Christina
Christina

Reputation: 34652

There are different ways of doing this. There's jQuery solutions too. This will help you get started:

DEMO: http://jsbin.com/voqubo/1

CSS

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

html {overflow-y:auto}

.embed-container {
    position: relative;
    height: 100%;
    max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

HTML

<div class='embed-container'><iframe src='http://www.bbc.com/' style='border:0'></iframe></div>

Upvotes: 1

Related Questions