iFrame Height Auto CSS

Question

I am having problems with my iframe  I really want the frame to auto adjust heights according to the content within the iframe  I really want to do this via the CSS without javascript  However  I will use javascript if I have too   I ve tried height  100   and height  auto   etc  I just don t know what else to try   Here is my CSS  For the frame      frame     position  relative    overflow  hidden    width  860px    height  100       And then for the frame s page    wrap     float  left    position  absolute    overflow  hidden    width  780px    height  100     text-align  justify    font-size  16px    color   6BA070    letter-spacing  3px      The page s coding looks like this      lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN              http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt   lt meta http-equiv  Content-Type  content  text html charset utf-8   gt     lt head gt   lt meta http-equiv  Content-Type  content  text html  charset UTF-8    gt   lt title gt     lt  title gt       lt link rel  stylesheet  href  style css  type  text css    gt   lt  head gt    lt body gt     lt div id  container  gt           lt div id  header  gt       lt  div gt      lt div id  navigation  gt        lt a href     class  navigation  gt home lt  a gt       lt a href  about php  class  navigation  gt about lt  a gt       lt a href  fanlisting php  class  navigation  gt fanlisting lt  a gt       lt a href  reasons php  class  navigation  gt 100 reasons lt  a gt       lt a href  letter php  class  navigation  gt letter lt  a gt     lt  div gt     lt div id  content   gt       lt h1 gt Update Information lt  h1 gt       lt iframe name  frame  id  frame  src  http   website org update php  allowtransparency  true  frameborder  0  gt  lt  iframe gt     lt  div gt     lt div id  footer  gt     lt  div gt   lt  div gt   lt  body gt   lt  html gt    Please note that the URL within the iframe is different then the website the iframe will be displayed on  However  I have access to both websites   Can anyone help

User · Answer

I had this same issue but found the following that works great:

The key to creating a responsive YouTube embed is with padding and a container element, which allows you to give it a fixed aspect ratio. You can also use this technique with most other iframe-based embeds, such as slideshows.

Here is what a typical YouTube embed code looks like, with fixed width and height:

 <iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw" 
 frameborder="0" allowfullscreen></iframe>

It would be nice if we could just give it a 100% width, but it won't work as the height remains fixed. What you need to do is wrap it in a container like so (note the class names and removal of the width and height):

 <div class="container">
 <iframe src="//www.youtube.com/embed/yCOY82UdFrw" 
 frameborder="0" allowfullscreen class="video"></iframe>
 </div>

And use the following CSS:

 .container {
    position: relative;
     width: 100%;
     height: 0;
     padding-bottom: 56.25%;
 }
 .video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

Here is the page I found the solution on:

https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

Depending on your aspect ratio, you will probably need to adjust the padding-bottom: 56.25%; to get the height right.

User · Answer

SweetSpice  use position as absolute in place of relative  It will work   frame  overflow  hidden  width  860px  height  100   position  absolute

User · Answer

You have to use absolute position along with your desired height  in your CSS  do the following    id-of-iFrame       position  absolute      height  100

User · Answer

According to this post  You need to add the  important css modifier to your height percentages   Hope this helps

User · Answer

This is my PURE CSS solution     Add  scrolling yes to your iframe    lt iframe src  your iframe link  width  100   scrolling  yes  frameborder  0  gt  lt  iframe gt    The trick      lt style gt      html  body  iframe   height  100         html   overflow  hidden     lt  style gt    You don t need to worry about responsiveness

User · Answer

hjpotter92      Add this to your  section    lt script gt    function resizeIframe obj        obj style height   obj contentWindow document body scrollHeight    px        lt  script gt        And change your iframe to this    lt iframe src       frameborder  0  scrolling  no  onload  resizeIframe this     gt     It is posted Here  It does however use javascript  but it is simple and easy to use code that will fix your problem

User · Answer

lt div id  content   gt       lt h1 gt Update Information lt  h1 gt       lt div id  support-box  gt           lt div id  wrapper  gt               lt iframe name  frame  id  frame  src  http   website org update php  allowtransparency  true  frameborder  0  gt  lt  iframe gt           lt  div gt       lt  div gt     lt  div gt    support-box           width  50           float  left          display  block          height  20rem     is support box height you can change as per your requirement           background-color  000             wrapper           width  90           display  block          position  relative          top  50           transform  translateY -50             background  ddd         margin auto         height 100px     here the height values are automatic you can leave this if you can               wrapper iframe           width  100           display  block          padding 10px          margin auto          https   jsfiddle net umd2ahce 1

User · Answer

You should note that div tag behaves like nothing and just let you to put something in it  It means that if you insert a paragraph with 100 lines of text within a div tag  it shows all the text but its height won t change to contain all the text   So you have to use a CSS  amp  HTML trick to handle this issue  This trick is very simple  you must use an empty div tag with class  clear  and then you will have to add this class to your CSS  Also note that your have  wrap in your CSS file but you don t have any tag with this id  In summary you have to change you code to something like below   HTML Code        lt  -- Change  id  from  container  to  wrap  -- gt       lt div id  wrap  gt               lt div id  header  gt           lt  div gt            lt div id  navigation  gt                lt a href     class  navigation  gt home lt  a gt               lt a href  about php  class  navigation  gt about lt  a gt               lt a href  fanlisting php  class  navigation  gt fanlisting lt  a gt               lt a href  reasons php  class  navigation  gt 100 reasons lt  a gt               lt a href  letter php  class  navigation  gt letter lt  a gt           lt  div gt           lt div id  content   gt               lt h1 gt Update Information lt  h1 gt               lt iframe name  frame  id  frame  src  http   website org update php  allowtransparency  true  frameborder  0  gt  lt  iframe gt                lt  -- Add this line -- gt               lt div class  clear  gt  lt  div gt           lt  div gt           lt div id  footer  gt           lt  div gt            lt  -- Add this line -- gt           lt div class  clear  gt  lt  div gt       lt  div gt    And also add this line to your CSS file    clear  display  block  clear  both

[html] iFrame Height Auto (CSS)

Examples related to html

Examples related to css

Examples related to iframe

Examples related to height