21

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>
deepak
  • 215
  • 1
  • 2
  • 8

8 Answers8

16

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

4dgaurav
  • 11,360
  • 4
  • 32
  • 59
  • Thanks Gaurav. But I have a Header with a responsive drop down menu in the body section. When the menu drops down the entire content below including the iframe adjusts its position so not sure if I can use Position:absolute; – deepak Apr 12 '14 at 07:43
  • check out the edit, now there is no position : absolute – 4dgaurav Apr 12 '14 at 08:05
  • How would you handle this if you had another header element(div=70px) in the body along with the iframe? Hope you are getting my question? – deepak Apr 12 '14 at 08:25
  • I am not quite sure with your question. Is it this http://jsfiddle.net/4dgaurav/3LAat/2/ – 4dgaurav Apr 12 '14 at 08:30
  • if you consider your example the height of the header is 70px. Even when I specify all the iFrames parent to have a height of 100% height. The scroll comes by adding the 70px height of the header(.element). I require a fluid width and height for the iframe without those scroll bars when re-sized. Are getting now? – deepak Apr 12 '14 at 08:46
  • Thanks Gaurav but I have a responsive menu that comes when the screen size is small. So this 70px height that is given to the header varies when the user clicks the menu button on the header. The menu items that appear after the user has clicked on the menu pushes the entire content of the page down. With a varying height of the header the iframe has to work without a scroll. – deepak Apr 12 '14 at 10:53
  • In my modern browser (Chrome version 48.0.2564.116 m) the `DEMO 2`and `DEMO Final` dont't start with 100% on height. I wanna make no absolute position, with relative for example, it's possible? – Maicon Lino Mar 01 '16 at 18:45
4

This worked for me 

<iframe frameborder="0" height="490" scrolling="no" src="" width="735"></iframe>
Milan Techglyphs
  • 51
  • 2
2

vw units work ( tested on Chrome and Firefox )

iframe{
 width:100vw;
}
Bob
  • 1,589
  • 17
  • 25
0

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>
Anant Dabhi
  • 10,864
  • 3
  • 31
  • 49
  • Hi: I am still getting the double scrolls - I need to do two things here 1. I need to remove the scroll from the main HTML which is occurring because of header=70px inside the body 2. the iframe also needs to scale according to the content HTML. Sorry, I am a new bee too. – deepak Apr 12 '14 at 07:35
  • The script also throws an Uncaught ReferenceError: $ is not defined error – deepak Apr 12 '14 at 08:01
  • you need to add jquery lib.. using ` ' – Anant Dabhi Apr 12 '14 at 08:13
  • your Ifrme is same domain or diffrent domain ? – Anant Dabhi Apr 12 '14 at 08:30
0

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>
Community
  • 1
  • 1
Yash
  • 6,644
  • 4
  • 36
  • 26
0

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)
    }  
  }
Bryan
  • 747
  • 1
  • 7
  • 19
user3352170
  • 21
  • 1
0

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>
aljaz-code
  • 223
  • 2
  • 10
0

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/

gman
  • 100,619
  • 31
  • 269
  • 393