iframe父级元素高度百分比不生效

html 复制代码
    <iframe :src="iframeUrl" width="100%" height="100%" frameborder="0" />

1、使用绝对定位 :将 iframe 的父级元素设置为相对定位,并将 iframe 设置为绝对定位。这样,iframe 就可以根据父级元素的高度百分比来设置其自身的高度。

css 复制代码
#parent {
    position: relative;
    height: 50%; /* 例如父级元素高度为屏幕高度的50% */
}

#iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

2、JavaScript 动态设置:使用 JavaScript 来动态设置 iframe 的高度,以匹配其父级元素的高度百分比。

javascript 复制代码
var parentHeight = document.getElementById('parent').clientHeight;
document.getElementById('iframe').style.height = parentHeight + 'px';
相关推荐
ningmengjing_4 分钟前
webpack打包方式
前端·爬虫·webpack·node.js·逆向
摇滚侠6 分钟前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript
Yuner20006 分钟前
Webpack开发:从入门到精通
前端·webpack·node.js
GISer_Jing7 分钟前
滴滴二面准备(一)
前端·javascript·面试·ecmascript
lecepin23 分钟前
AI Coding 资讯 2025-09-10
前端·javascript·面试
RestCloud35 分钟前
PostgreSQL大表同步优化:如何避免网络和内存瓶颈?
前端·数据库·api
RestCloud37 分钟前
iPaaS 与传统 ESB 的区别,企业该如何选择?
前端·架构
Mapmost38 分钟前
三维场景加载卡顿?可能是显卡设置出了问题
前端
书源1 小时前
灵活性和可维护性,被严重低估的编程原则
前端·javascript·vue.js