CODEWITHSUNDEEP
htmlcssiframe
chandan
chandan

Reputation: 1574

Integrating iframe like a div with scroll

Firstly here's the fiddle

I am trying to integrate a iframe like a div, I know how do this if this was a normal iframe but this iframe has a slider inside it. As a result there are two scroll bars appearing on the right side.

HTML code:

<div class="container">
    <div class="h_iframe">
        <iframe  src="http://isotopethemes.com/slider-test/" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS code:

html,body {height:100%;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

Is there any way where I could make the iframe behave like a div so that the page will have a single scroll bar. overflow:none would remove the scroll from the iframe.

Any help would be appreciated.

Upvotes: 1

Views: 3712

Answers (4)

Kai Yao
Kai Yao

Reputation: 381

The other answers already work well in this case, but I would just like to point out that the idea is to make the outer frame "non-existent", rather than making the iframe blend in with the page. This works in this case where the inner iframe is intended to fill the entire page.

However, unfortunately, there is no easy way to do "integrate an iframe like a div" in general (at point of writing).

There is an attribute <iframe seamless> that does exactly what you want (embed an iframe like a div), but that doesn't work in any major browser at the moment. See: http://caniuse.com/#feat=iframe-seamless. There are probably some ways to use Javascript to simulate this: e.g. https://github.com/ornj/seamless-polyfill has the page in the iframe use Javascript to communicate its scrollHeight (using postMessage) to the outer page, which then uses Javascript to change the height of the iframe so the entire page in the iframe can be shown without scrolling.

Upvotes: 2

Shaggy
Shaggy

Reputation: 6796

In this particular instance, with a full page iframe, set the margin of your body tag to 0:

html,body{
    height:100%;
}
body{
    margin:0;
}
.h_iframe iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
<div class="container">
    <div class="h_iframe">
        <iframe src="http://isotopethemes.com/slider-test/" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Upvotes: 1

Tingo
Tingo

Reputation: 482

Add overflow:hidden to your CSS like this. I tried it in your fiddle and it works.

html,body        {height:100%;overflow:hidden}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

Upvotes: 1

Sean Stopnik
Sean Stopnik

Reputation: 1868

You cannot write css to affect the inner contents of the iframe... but you can add an overflow: hidden; to your body.

Upvotes: 0

Related Questions