首页 > 其他分享 >如何让iframe铺满整个屏幕 , iframe 高度自适应

如何让iframe铺满整个屏幕 , iframe 高度自适应

时间:2023-02-07 11:23:38浏览次数:40  
标签:100% 铺满 height width iframe 屏幕

 

试了一圈方法都不好使,结果最后用的就是它本身的 width 和 height 属性啊

1、定义一个父div 铺满屏幕

2、定义 iframe 的 width 和height 为 100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统日志</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
 
        html,body{
            width: 100%;
            height: 100%;
        }
 
        .container{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
        <div class = "container"  >
<!--        <iframe src="http://172.18.199.243:5601/app/kibana#/dashbord/Filebeat-syslog-dashboard?embed=true&_g=()" height="600" width="800"></iframe>-->
        <iframe src ="http://www.baidu.com"  id="info-frame"  width="100%" height="100%" ></iframe>
<!--        <iframe src="http://www.baidu.com" frameborder="0" scrolling="no" id="info-frame" οnlοad="setIframeHeight(this)"></iframe>-->
            
        </div>
 
</body>
 
</html>

 

标签:100%,铺满,height,width,iframe,屏幕
From: https://www.cnblogs.com/domefy/p/17097767.html

相关文章

  • 获取屏幕上正在显示的activity
    用过ActivityManager的童鞋估计都知道,可以从ActivityManager里面可以获取到当前运行的所有任务,所有进程和所有服务,这是任务管理器的核心。那么,从里......
  • 屏幕图像渲染原理
    对应一个客户端开发来说,平时做的的最多的就是写页面,所以有必要了解从视图代码到图像显示到屏幕上的整个过程和原理。下面以从视图代码到显示器图像的中间产物帧缓冲区图像......
  • qt实现类似windows的屏幕保护(小球碰撞动画)
    最近看了篇文章啊,讲的就是让小球进行移动,可能别人做的是仿真啊,用到了太多的数学函数,什么运动学,各种的,我就想着,自己能不能使用qt实现下这种效果,就是有一个球不停的移动,当碰......
  • 转载: css适配iPhoneX屏幕安全区
    前言iPhoneX取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底......
  • ST77903 手表屏幕学习
    参考资料:[1]ST77903_Spec:链接:https://pan.baidu.com/s/1NfPUBq-4pB01mQFBxrzO2Q?pwd=g3h5提取码:g3h5[2](2条消息)ST77903QSPI+STM32H750+RTThread+LVGL(一)_......
  • HTML iframe的优缺点
    一、优点iFrame有以下优点:封装性:iFrame可以在页面中封装和隔离不同的内容,使页面更清晰和易于维护。资源利用:iFrame可以在页面中复用相同的内容,节省了开发时间和......
  • Jmeter屏幕录制
    一、简述本文主要介绍jmeter如同录制脚本。虽然badboy这个工具也可以进行脚本录制,但由于badboy已经不更新了,以及只能录制Windows下的web网站,所以本文就不介绍了。二、jme......
  • echarts大屏开发屏幕适配方案
    参考https://blog.csdn.net/qq_56580072/article/details/1275523921、vscode安装pxtorem&rpx&vw2、设置字体16px 3、引入flexibleimport'@/utils/flexible......
  • RTMP录屏直播屏幕数据获取与MediaCodec编码
    目录前言RTMP直播实现流程视频采集——MediaProjection编码——MediaCodec音频采集——AudioRecordRTMP音频包数据RTMP视频数据前言本文介绍的是MediaProjection录屏、麦......
  • postcss-px-to-viewport适配屏幕大小
    1、postcss-px-to-viewport适配的介绍postcss-px-to-viewport是一个插件,用起来非常方便,安装一下插件,搞个配置文件就可以直接用了。2、postcss-px-to-viewport适配的......