Search code examples
htmliframe

I can not adjust the iframes height

Whatever I try I can not adjust the iframe's height on my website. I have tried height="100%" and in CSS

iframe {
  height: 100%; 
}

link to it and my code (inspect) https://jandjcards.netlify.app/

Solution

  • Have you tried using an absolute unit like vh, vw or px? If you use percentage the width and height of the iframe will depend on the parent element. However, using other relative units will allow you to change the width and height of the element properly.

    Absolute measurement units:

    • VH (Relative to 1% of the height of the viewport)
    • VW (Relative to 1% of the width of the viewport)
    • PX (Pixels)
    • REM (Relative to font-size of the root element)

    First solution

    Try including this:

    iframe{

   width: 20vw;

   /* Use whichever unit you want except percentage */

}

    If you want more informaton about absolute and relative css units I recommend you this website:

    https://www.w3schools.com/CSSref/css_units.asp

    Second solution

    If you still want to use percentage, you will need to resize the parent element of the iframe. Basically all the elements whose display is "block" will expand itself horizontally all it cans, but will set its height to whatever it has inside. So if you use percentage to resize an iframe it will adopt the height of the parent element and that's not the idea.

    Try resizing the parent element like this:

    #container{
   height: 10vw;
}

iframe{
   height: 80%;
}

    I hope this helps!