Fitting iframe inside a div

24
votes

I am trying to fit an iframe inside a div. My problem is that I can't seem to get it to nest to 100% of the width of the div, I need to specify pixel width of the iframe.

I would like the iframe to be "inside" the div so that if the div is resized by a smaller browser, the iframe gets resized too.

This is my code:

<div class="row-fluid">
   <div class="span9" id="standard">
      <div class="header-box">
         <p class="header">Bla Bla Header</p>
      </div>
      <div id="wrap">
         <iframe id="frame" src="https://docs.google.com/a/...." frameborder="0"></iframe>
      </div>
   </div>
   ...
</div>

And CSS:

#wrap { width: 1130px; height: 100%; padding: 0; overflow: hidden; position: relative; }

#frame {
   width: 100%;
   height: 100%;
   border: 1px solid black;
   position: relative;
}

#frame {
   zoom: 0.75;
   -moz-transform: scale(0.75);
   -moz-transform-origin: 0 0;
   -o-transform: scale(0.75);
   -o-transform-origin: 0 0;
   -webkit-transform: scale(0.75);
   -webkit-transform-origin: 0 0;
}

Below is what happenswhen the browser is resized. enter image description here

3
csshtmllayoutiframe
Check out the answers here: stackoverflow.com/questions/6634582/… The problem is likely because you are defining an exact size width for your wrap div - Display Name is missing
The thing is, I don't want my divs to have fixed positions. The reason I am defining an exact size for the wrap div is so that the pdf fits perfectly inside the div when the browser is a normal size. The photo shows what happens when I reduce the browser size. - Julia

3 Answers

32
votes

Would this CSS fix it?

iframe {
    display:block;
    width:100%;
}

From this example: http://jsfiddle.net/HNyJS/2/show/

10
votes

Based on the link provided by @better_use_mkstemp, here's a fiddle where nested iframe resizes to fill parent div: http://jsfiddle.net/orlenko/HNyJS/

Html:

<div id="content">
    <iframe src="http://www.microsoft.com" name="frame2" id="frame2" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" onload="" allowtransparency="false"></iframe>
</div>
<div id="block"></div>
<div id="header"></div>
<div id="footer"></div>

Relevant parts of CSS:

div#content {
    position: fixed;
    top: 80px;
    left: 40px;
    bottom: 25px;
    min-width: 200px;
    width: 40%;
    background: black;
}

div#content iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}
8
votes

I think I may have a better solution for having a fully responsive iframe (a vimeo video in my case) embed on your site. Nest the iframe in a div. Give them the following styles:

div {
    width: 100%;
    height: 0;
    padding-bottom: 56%; /* Change this till it fits the dimensions of your video */
    position: relative;
}

div iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
}

Just did it now for a client, and it seems to be working: http://themilkrunsa.co.za/