‌iframe使用百分比设置宽高不生效

yy_demo

已于 2024-11-21 14:09:19 修改

阅读量401

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript html

于 2024-11-20 09:06:35 首次发布

本文链接：https://blog.csdn.net/yy_demo/article/details/143901232

为了适应不同的显示器，宽高不能直接写px，‌iframe之前我都是使用vw或者vh设置宽高，是可以生效的，但是这次我的左侧是有一个固定宽度的侧边栏，导致不能使用vw，我就想使用百分比，但是一直不生效。

我找到一个方法可以很方便的使用百分比，使用子绝父相，就是给iframe的父盒子设置绝对定位，然后iframe加一个相对定位，百分比设置宽高就可以生效了。

.box {
    position: relative;
    width: 100%;
    height: 100%;
}
 
.iframe-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

虽然找到了解决方法，但是为什么iframe使用百分比宽高不生效的原因我也不知道。