Fitting iframe inside a div

Question

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    lt div class  row-fluid  gt      lt div class  span9  id  standard  gt         lt div class  header-box  gt            lt p class  header  gt Bla Bla Header lt  p gt         lt  div gt         lt div id  wrap  gt            lt iframe id  frame  src  https   docs google com a       frameborder  0  gt  lt  iframe gt         lt  div gt      lt  div gt          lt  div gt    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

User · Answer

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/

User · Answer

Would this CSS fix it   iframe       display block      width 100       From this example  http   jsfiddle net HNyJS 2 show

User · Answer

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    lt div id  content  gt       lt iframe src  http   www microsoft com  name  frame2  id  frame2  frameborder  0  marginwidth  0  marginheight  0  scrolling  auto  onload    allowtransparency  false  gt  lt  iframe gt   lt  div gt   lt div id  block  gt  lt  div gt   lt div id  header  gt  lt  div gt   lt div id  footer  gt  lt  div gt    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

[css] Fitting iframe inside a div

Examples related to css

Examples related to html

Examples related to layout

Examples related to iframe