Is it possible to adjust the height of the iframe scroll according to the size of the screen (browser)? It would be like simply replacing the default browser scroll with the iframe scroll. Here is what I mean by this:

I currently have my browser scroll disabled:

<style type="text/css">
html, body {
  overflow: hidden;
}
</style>

I have my iframe:

<iframe width="100%" src="" scrolling="yes" frameborder="0" height="100%">
</iframe>

With width set to 100% the iframe scroll bar is pushed to the far right somewhat replacing the default browser scroll bar and my iframe is now the center piece of the website, (yahoo is an example). I can always adjust the height of the iframe to fit my specific browser size however is there a way I set the iframe scroll according to the browser height automatically? Make it responsive to the browser height just like it is to the width?

Is it possible to adjust the height of the iframe scroll according to the size of the screen (browser)? It would be like simply replacing the default browser scroll with the iframe scroll. Here is what I mean by this:

I currently have my browser scroll disabled:

<style type="text/css">
html, body {
  overflow: hidden;
}
</style>

I have my iframe:

<iframe width="100%" src="http://www.yahoo." scrolling="yes" frameborder="0" height="100%">
</iframe>

With width set to 100% the iframe scroll bar is pushed to the far right somewhat replacing the default browser scroll bar and my iframe is now the center piece of the website, (yahoo is an example). I can always adjust the height of the iframe to fit my specific browser size however is there a way I set the iframe scroll according to the browser height automatically? Make it responsive to the browser height just like it is to the width?

• javascript
• html
• iframe

Share Improve this question Follow asked May 13, 2013 at 15:55 NicoNico 10011 gold badge22 silver badges1414 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

If you're using jQuery, you could do $(window).height() and then set the iframe height to it.

Drop this into the bottom of your HTML file, just above the closing </body> tag.

<script src="//ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
;(function($){
    $(document).ready(function(){
        $('iframe').height( $(window).height() );
        $(window).resize(function(){
            $('iframe').height( $(this).height() );
        });
    });
})(jQuery);
</script>