elementor网页嵌入iframe页面时,无法调整iframe高度

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也会按指定高度显示

Comments are closed.