elementor网页嵌入iframe页面时,无法调整iframe高度
问题:客户想通过iframe嵌入第三方网页到elementor页面中,在Container容器中添加Html元素中放入iframe标签,无法通过Html元素还是容器调整嵌入的网页高度,一直显示默认150px高度

方案:


设置Container容器样式类:iframe-wrapper,在自定义CSS中填写下面样式
.iframe-wrapper {
position: relative;
overflow: hidden;
}
.iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

iframe代码如下:
<iframe class="iframe" src="https://roi.clearskyrobot.com/" width="100%" height="100%" frameborder="0" scrolling="auto">
</iframe>
解决方案原理:让iframe元素以绝对定位点满整个Container容器,这样调整容器高度,iframe也会按指定高度显示