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/

CodePudding user response：

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!