我无法调整 iframe 的高度

I can not adjust the iframes height

无论我怎样尝试，我都无法调整我网站上 iframe 的高度。我试过 height="100%" 和 CSS

iframe {
  height: 100%; 
}

link 它和我的代码（检查） https://jandjcards.netlify.app/

您是否尝试过使用绝对单位，如 vh、vw 或 px？如果您使用百分比，则 iframe 的宽度和高度将取决于父元素。但是，使用其他相对单位将允许您正确更改元素的宽度和高度。

绝对测量单位：

  • VH（相对于视口高度的1%）
  • VW（相对于视口宽度的1%）
  • PX（像素）
  • REM（相对于根元素的font-size）

第一个解决方案

尝试包括这个：

iframe{

   width: 20vw;

   /* Use whichever unit you want except percentage */

}

如果您想了解有关绝对和相对 css 单位的更多信息，我向您推荐这个网站：

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

第二种解决方案

如果您仍想使用百分比，则需要调整 iframe 父元素的大小。基本上所有显示为“块”的元素都会尽可能地水平扩展，但会将其高度设置为其内部的任何值。因此，如果您使用百分比来调整 iframe 的大小，它将采用父元素的高度，这不是我们的想法。

尝试像这样调整父元素的大小：

#container{
   height: 10vw;
}

iframe{
   height: 80%;
}

希望对您有所帮助！