iframe height 100% not working

Question

I have a problem with iframe height. Below is the piece of code with iframe height 100%

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

But, iframe not fit with the entire screen height. I am getting 1/4 th screen

So, I used Jquery here to identify the screen height and set it to iframe height.

$(document).ready(function() {
    var iframeWin = screen.height;
    $('#iframeid').height(iframeWin);
});

Now the height got expanded to some extend (screen height), but the problem is I am getting more height. I am seeing some scrolling too..

Is there any correct way to fit the iframe on entire screen?

Here is my JSFIDDLE

you're seeing expanded size because you're using the full screen size.. you need to take into account other elements on the screen which are `pushing` your iframe down — Pogrindis, Feb 06 '15 at 09:57
I don't mean to be THAT guy but, this question has been asked a few times before. [Have a look here for a number of solutions.](http://stackoverflow.com/questions/5867985/iframe-auto-100-height) :) — Tim, Feb 06 '15 at 10:00

score 1 · Accepted Answer · answered Feb 06 '15 at 10:01

1

The problem is that you're using the whole screen height. The proper way to do this is using window height. So the proper code would be:

$(document).ready(function() {
    var window_size = $(window).height();
    $('#iframeid').css('height', window_size);
});

answered Feb 06 '15 at 10:01

Preetesh

Is that the correct way ? – UI_Dev Feb 06 '15 at 10:06
Yeah, of course it is. Read this documentation to learn more: http://api.jquery.com/height – Preetesh Feb 06 '15 at 10:07
Also I wanted to add that `screen.height` returns the height of the screen itself. So that means if you're using a screen whose resolution is 1366x768 than `screen.height` will return 768. – Preetesh Feb 06 '15 at 10:14

1 Answers1