iframe height 100% 问题

2023-11-17

 iframe height 100% 问题

 

最近,利用 MapGuide 技术开发一个 WebGIS 的应用程序,其中用到了 <iframe> 标签;可是当我调试运行的时候,其 width=100% 生效了,但 height=100% 就无效,无论用 JavaScript 的方式修改还是直接设置其 height 属性为100%,始终只有 200px 左右的高度。折腾了我半天,再经过一番研究,终于找到答案了,结论如下:要使 <iframe> 标签的 height=100% 生效,一定要保证其父容器的 height=100% 有效(但我仍然想不通的是,为什么 width=100% 就没问题呢?)。现在举例如下:

 

在 index.html 中的代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iframe tag test</title>
<style type="text/css">
html, body
{
margin: 0px 0px;
width: 100%;
height: 100%;
}
iframe
{
margin: 0px 0px;
width: 100%;
height: 100%;
}
</style>

<script type="text/javascript">
function iframeHeight() {
document.getElementById('iframeId').height="100%";
}
</script>

</head>
<body>
<iframe id="iframeId" frameborder=0 scrolling=no
src=http://www.google.com />
</body>
</html>

 

在上述代码中,样式代码部分明确指出了 html, body 的 width 和 height 为 100%,这是必须的,随后指出了 iframe 的 width 和 height 也为 100%,这里的意思是说 iframe 的 width 和 height 是相对于其父容器的 width 和 height 为 100%,这样的方法既简单又明了,IE、Firefox(火狐浏览器)、chrome(Google浏览器)均能顺利通过。希望遇到此问题的同志不要再走弯路!

 

原文:http://blog.csdn.net/zlxzlxzlxzlxzlx/article/details/5431980

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

iframe height 100% 问题 的相关文章

随机推荐

  • 项目五:智慧家庭

    目录 1 项目功能演示 2 总体框架 3 WIFI连接模块 4 智能门禁模块 5 数据采集模块 6 智能检测模块
  • Caffe源码(十一):io.cpp 分析

    目录 目录 简单介绍 主要函数 ReadProtoFromTextFile 函数 WriteProtoToTextFile 函数 ReadProtoFromBinaryFile 函数 WriteProtoToBinaryFile 函数 Re
  • 关于传递list类型的参数的问题

    java中除了基础的数据类型是值传递外 其它类型都是对象 也就是引用类型 地址传递 这个就不多说了 今天遇到一个问题 就是在多次添加同一个list对象到另一个list里的时候 为什么会添加多少次list对象 外面这层list的大小就有多少呢
  • vim 基础操作

    bash或cmd 已经配置好vim的环境变量 下 vim a txt 创建a txt文件 vim 下 i a o O s进入插入 编辑 模式 esc 退出插入模式 回到正常模式 正常模式下 x 或 wq 保存退出vim 称为底行模式 在正常
  • java项目部署到阿里云服务器步骤

    阿里云服务器详细步骤 一 什么是云服务器ECS 是阿里云产品体系中 最基础的计算服务 通常用作应用程序的运行环境 最重要的特点是弹性 二 基础运行环境 用户的应用程序运行在实例的操作系统上 三 特点 弹性 容量不够可以直接在云服务器上扩展配
  • vue3 中如何动态加载本地图片资源

    在untils文件中加入getImageUrl方法 export const getImageUrl name string type string png gt return new URL 本地资源路径 src assets image
  • @Cacheable、@CachePut、@CacheEvict、@Caching、@CacheConfig详解

    文章目录 一 概述 二 缓存注解种类 三 优劣势说明 四 如何使用 五 详细介绍介绍 1 Cacheable 常用 1 value cacheNames 属性 2 key属性 3 keyGenerator 属性 4 cacheManager
  • java判断两个list是否有交集_java怎么判断两个集合之间是否有交集

    背景 前端传了list集合 后端字段里存的也是 1 2 3 4 这种形式 不借助sql 怎么看前端传的集合是否在后端字段的集合中 代码 public static boolean judgeIntersection List list1 L
  • ipv4服务器修改,更改手动IP地址方法.pdf

    更改手动 IP 地址方法 1 点击显示器右下角的 无线信号标志 点击打开网络和共享 点击无线网络连接 点击详细信息查看现在的 IP 地址 IPv4 地址 192 168 1 103 IPv4 子网掩码 255 255 255 0 IPv4
  • go 问题合集(持续更新)

    数据库单复数问题 默认使用go的话 查询数据库对应的表单是在你的结构体上 s 变成复数操作 但是我们一般不习惯这样子建表 所以在构建db的时候 加上 singulartable ture 2 导入不了本地的包 看 那个目录的package是
  • Spring Boot 整合 springdoc-openapi

    springdoc openapi官网 springdoc org springdoc openapi Github仓库 springdoc springdoc openapi springdoc openapi Maven仓库 Home
  • CoordinatorLayout+TabLayout在Fragment中使用遇到的问题

    在Fragment中 使用CoordinatorLayout TabLayout布局 会遇到recyclerview 给遮挡的问题 修改完成 效果图如下 一 先上布局代码
  • 【老生谈算法】matlab实现极限学习机的回归拟合及分类——对比实验研究

    Matlab实现极限学习机的回归拟合及分类 对比实验研究 1 文档下载 本算法已经整理成文档如下 有需要的朋友可以点击进行下载 说明 文档 点击下载 本算法文档 老生谈算法 matlab实现极限学习机的回归拟合及分类 对比实验研究 doc
  • 代码审查工具Collaboratorv11.5版本上新!GitHub Polling集成被弃用!

    Collaborator是一款功能全面的代码审查工具 它的代码审查可以为开发测试人员和管理者提供帮助 生产出高质量的代码 我们很高兴的告诉大家 Collaborator更新至11 5版本 Diff Viewer内容现在与Review Scr
  • SmartFusion从FPGA到ARM(四)——MSS_TIMER定时器的使用

    文章目录 1 定时器资源简介 2 MSS TIMER库函数简介 3 简单的周期性中断 4 自定义产生波形 5 64位定时器的使用 6 单次中断模式 系列教程 SmartFusion从FPGA到ARM系列教程 1 定时器资源简介 SmartF
  • 注意COCOS2DX中的Z缓冲,解决点选不了的问题

    前几天遇见一个问题 一堆牌点选时有的能点上 但是有的点不上 当时觉得很诡异 后来 请经验丰富的同事看了下 原来是COCOSTUDIO中 点不上的区域 有其他的隐藏物体 将牌的 setLocalZorder 设置个较大的值即可 真是崩溃了 原
  • 达梦数据库使用安装用户打开图形化工具显示无权限

    在x86虚拟机下 使用达梦数据库安装用户安装数据库后 经常需要使用安装用户打开诸如manager console等图形化管理工具 这时候经常遇到安装用户没有权限执行图形化界面的打开脚本 如下图 dmdba为安装数据库的用户 这实际上是dmd
  • 在C++泛型编程中如何只特化类的某个成员函数

    我们知道在C 模板编程中如果我们特化或是偏特化某个模板类 我们需要重写整个模板类中的所有函数 但是这些代码通常是非常相似的 甚至在某些情况下可能只有一两个函数会不一样 其他函数都是一样的 在这种情况下 同时存在多份相同的代码 对我们维护这些
  • 两个无序单链合并成一个有序单链表

    解题思路 两个无序链表先转换成两个有序单链表 两个有序单链表合并成一个有序单链表 代码 import java util 链表 class Node int val Node next public Node int val this va
  • iframe height 100% 问题

    iframe height 100 问题 最近 利用 MapGuide 技术开发一个 WebGIS 的应用程序 其中用到了 标签 可是当我调试运行的时候 其 width 100 生效了 但 height 100 就无效 无论用 JavaSc