Iframe scrolling overflow hidden not working in css

Question

Here is the iframe

<iframe class="iframe_style" id="iframeid" src="#" height="100%" width="100%" ></iframe>

I'm using CSS as overflow: hidden, but still I'm getting scrolling..

.iframe_style{
border: 3px solid red;
overflow: hidden;
}

JSFIDDLE

Any help on this?

Answer 1

As I can see in your fiddle you set iframe overflow to hidden which will work for Iframe contents

If you want to make it for body , just add

body{
    overflow:hidden;
}

JSFIDDLE

Answer 2

Add display: block to the iframe.

.iframe_style{
    border: 3px solid red;
    display: block;
}

Don't forget to account for the border that you have added. Subtract the border size from the width and height using jQuery.

var window_height = $(window).height() - 6;
var window_width = $(window).width() - 6;

JSFiddle: http://jsfiddle.net/Lxjy4ae6/50/

Answer 3

body, html { 
    overflow: hidden;
}

Should do the trick.