CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
deepak
deepak

Reputation: 245

How to set the iframe height & width to 100%

I am in need of doing the following:

  1. I have a header content which is 70px and an iframe with a wrapper. The height & width of the iframe has to be set to 100% without scroll, except for the scroll that comes for the body when the content is loaded and the size of the content is more.
  2. The content of the iframe is another HTML page from the same domain. The iframe also needs to scale according to the responsive HTML page.

Can any one help?

Things I cannot use:

Position:Fixed;(mainly due to a script that i am using for the sideslidebars

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Bus Management System</title>
    <!-- Viewport meta tag to prevent iPhone from scaling our page -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">


     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>

     $(function(){

            var iFrames = $('iframe');

            function iResize() {

                for (var i = 0, j = iFrames.length; i < j; i++) {
                  iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
                }

                if ($.browser.safari || $.browser.opera) { 

                   iFrames.load(function(){
                       setTimeout(iResize, 0);
                   });

                   for (var i = 0, j = iFrames.length; i < j; i++) {
                        var iSource = iFrames[i].src;
                        iFrames[i].src = '';
                        iFrames[i].src = iSource;
                   }

                } else {
                   iFrames.load(function() { 
                       this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
                   });
                }

            });
</script>


  </head>

    <style type="text/css" media="all">
        html, body, iframe {width:100%; height:100%;box-sizing:border-box; margin:0; padding:0; border:0;}
        body {border:4px solid green;}
        iframe {border:6px solid red;width:100%; height:100%;display:block;}
        #wrapper {border:2px solid blue; width:100%; height:100%;}

    </style>
    <body>
        <div style="height:50px; background-color:#000; color:#fff;">Header</div>

            <iframe src="http://www.google.com" style="width:100%; height:100%;" onLoad="calcHeight();"></iframe>

    </body>
</html>

Upvotes: 24

Views: 103341

Answers (8)

user128511
user128511

Reputation:

I'm not sure what you're asking but, I had a need for the iframe to size to fit the content of the iframe. My solution was to have the iframe send messages to the parent when it changes size

iframe script

{
  const observer = new ResizeObserver(() => {
    window.parent.postMessage({
      width: document.body.scrollWidth,
      height: document.body.scrollHeight,
    });
  });
  observer.observe(document.body);
}

main page script

const iframeElem = document.querySelector('iframe');

window.addEventListener('message', (e) => {
  const {width, height} = e.data;
  iframeElem.style.width = `${width}px`;
  iframeElem.style.height = `${height}px`;
});

S.O's broken neglected snippet system has permissions set so you can't run iframes based on blobs but here's a fiddle

https://jsfiddle.net/greggman/apkj8sh4/

Upvotes: 0

aljaz-code
aljaz-code

Reputation: 233

I have a video frame in proportions 6:19 from YouTube -> by calculating 9/16 - 0.5625. multiplying with 95vw (you can also set to 100vW).

Worked the best to keep video ratio the same.

@media all and (max-width: 730px) {
    iframe{
        width: 95vw !important;
        height: calc(95vw*0.56) !important;
    }
}
    iframe{
    margin:auto;
    display:block;
    width:685px;
    height:385px;
}
    <iframe id="video" allowfullscreen src="https://www.youtube.com/embed/5Mdy8nBBbQQ?autoplay=1"></iframe>

Upvotes: 0

user3352170
user3352170

Reputation: 21

You could attempt to do something like this:

  iframe {
    width: 825px;   // you define your standar width and height
    height: 464px;
    @media screen and (max-width: 1000px){ // then for your responsive you do this or only this. 
      width: calc(84vw);
      height: calc(47vw)
    }  
  }

Upvotes: 0

Bob
Bob

Reputation: 1679

vw units work ( tested on Chrome and Firefox )

iframe{
 width:100vw;
}

Upvotes: 2

Milan Techglyphs
Milan Techglyphs

Reputation: 67

This worked for me 

<iframe frameborder="0" height="490" scrolling="no" src="" width="735"></iframe>

Upvotes: 4

Yash
Yash

Reputation: 7064

Simple and clean. jQuery is required. Source: https://stackoverflow.com/a/3940802

Modified a bit

                function iframeHeight() {
                    var newHeight = $(window).height();
                    var newWidth = $(window).width();
                    var buffer = 100;     // space required for any other elements on the page
                    var newIframeHeight = newHeight - buffer;

                    $('iframe.fop').css('height',newIframeHeight).css('width',newWidth);    //this will aply to all iframes on the page, so you may want to make your jquery selector more specific.
                }

                // When DOM ready
                $(function() {
                    window.onresize = iframeHeight;
                    iframeHeight();
                });
<iframe src="" target="_parent" width="100%" height="100%" class="fop"></iframe>

Upvotes: 0

4dgaurav
4dgaurav

Reputation: 11506

CSS only solution for 100% width and height and responsive

HTML

<div class="container">
    <div class="h_iframe">
        <iframe  src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

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

DEMO

without position : absolute

css

html,body        {height:100%;}
.h_iframe iframe {width:100%; height:100%;}
.h_iframe {
    height: 100%;
}

DEMO 2

And finally here is the crack

Modern browsers now support the:

width: calc(100% - 70px);

CSS

html,body {
    height:100%; 
    margin-top:0; 
    margin-bottom:0;
}
.h_iframe iframe {
    width:100%;
    height:calc(100% - 75px);
}
.h_iframe {
    height: 100%;
}
.element{
    width:100%;
    height:70px;
    background:red;
}

HTML

<div class="container">
    <div class="element">here it goes</div>
    <div class="h_iframe">
        <iframe  src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Final DEMO

Upvotes: 16

Anant Dabhi
Anant Dabhi

Reputation: 11104

Normally you set and width and height for iframes. If the content inside is bigger, scrollbars have to suffice. The script below attempts to fix that by dynamically resizing the iframe to fit the content it loads.

you can use this function to set auto hight using jquery /javascript 

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>

     $(function(){

            var iFrames = $('iframe');

            function iResize() {

                for (var i = 0, j = iFrames.length; i < j; i++) {
                  iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
                }

                if ($.browser.safari || $.browser.opera) { 

                   iFrames.load(function(){
                       setTimeout(iResize, 0);
                   });

                   for (var i = 0, j = iFrames.length; i < j; i++) {
                        var iSource = iFrames[i].src;
                        iFrames[i].src = '';
                        iFrames[i].src = iSource;
                   }

                } else {
                   iFrames.load(function() { 
                       this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
                   });
                }

            });
</script>

And your Iframe html like this 

<iframe  src="http://www.google.com"  class="iframe" scrolling="no" frameborder="0"></iframe>

Upvotes: 0

Related Questions