`

Iframe 高度自适应浏览器高度

    博客分类:
  • Css
 
阅读更多

公司开发的程序需要适应在不同的分辨率下的高度。

 

使用我使用 Iframe 的 style="height:100%;" 但是没效果 。 

 

Iframe 设置了 高度 100%  是根据外部容器的高度设置的, 所以,首先要设置好 Body  的高度 。

 

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>教员换班</title>
		<%@include file="/common/jspi/jsAndCss.jspi"%>
		<style type="text/css">
	    html,body{ height:100%; margin:0px; padding:0px;}
	    .box{ height:100%; width:100%;}
	    </style>
	</head>
	
	<body>
		<div class="box">
				<div class="title_table" style="width:96%">
					<span>教员换班</span>
				</div>
				<table cellspacing="0" cellpadding="0" style="width:96%; height:95%;">
				<s:form id="querySimulatorTeaForm"
					action="simulatorRes/queryForSimulatorStuSimlist.do" method="POST" target="simListFrame">
					<tr>
						<td align="center" style="width:70%; height:100%;" valign="top">
							<table class="table_form" style="width:100%;height:150px;">
								<tr>
									<td align="center" valign="middle">
										<input type="checkbox" id="selall" onclick="doCheckClick()"/>全选
									</td>

									</td>
								</tr>
							</table>
							<iframe id="simListFrame" name="simListFrame" src="queryForSimulatorTeaSimlist.do" scrolling="auto" align="top"
							 style="width: 100%; height:72%;"></iframe>
						</td>

					</tr>
				</s:form>
				</table>
				
		</div>

	</body>
	
	
</html>

 这样, 设置好了Iframe 的高度自适应,

 

 

分享到:
评论

相关推荐

    Iframe 高度自适应,js控制Iframe 高度自适应.docx

    Iframe 高度自适应是指在网页中嵌入的 iframe 元素能够根据其内容自动调整高度,以适应不同的浏览器和屏幕尺寸。js 控制 Iframe 高度自适应是指使用 JavaScript 语言来控制 iframe 的高度,使其能够自动调整以适应...

    iframe自动适应高度(完美自适应高度嵌套代码),兼容目前主流浏览器。

    标题提到的“iframe自动适应高度(完美自适应高度嵌套代码)”提供了一个解决方案,它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度,包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...

    iframe高度自适应.pdf

    ### iframe高度自适应技术详解 在网页开发过程中,经常会遇到需要在一个页面中嵌入另一个页面的需求,这通常通过HTML的`iframe`元素实现。然而,一个常见的问题是当嵌入的内容高度变化时,如何使`iframe`的高度能够...

    iframe高度自适应,多浏览器兼容

    `iframe`的使用涉及到许多关键点,尤其是高度自适应和多浏览器兼容性,这在实际项目中至关重要。本篇文章将详细讲解如何实现`iframe`的高度自适应以及在不同浏览器之间的兼容性处理。 一、`iframe`基本使用 `iframe...

    iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

    然而,`&lt;iframe&gt;`的高度自适应问题常常困扰着开发者,尤其是当`&lt;iframe&gt;`内部的内容动态加载或者变化时,如何让`&lt;iframe&gt;`自动调整其高度以适应内容,而不会导致滚动条溢出或内容被截断,成为了一个常见需求。...

    iframe高度自适应

    然而,`iframe` 的高度自适应往往是一个常见的问题,特别是当`iframe`内容动态加载或者不同浏览器之间存在差异时。本文将深入探讨如何实现`iframe`的高度自适应,以确保内容在所有浏览器中都能正确显示。 首先,...

    用jquery实现iframe高度自适应实例代码完美兼容多数浏览器

    最后,`MainFrame.html`和`用jquery实现iframe高度自适应完美兼容多数浏览器.html`可能是包含上述代码的实际示例页面,而`js`文件夹可能包含了jQuery库和其他可能的辅助脚本。 总结,通过jQuery,我们可以优雅地...

    解决IE,Firefox,chrome,safari浏览器中iframe显示高度自适应问题

    ### 解决IE、Firefox、Chrome、Safari浏览器中iframe显示高度自适应问题 在Web开发中,`iframe`(Inline Frame)元素常被用于嵌入另一个HTML文档到当前页面中,这种技术为开发者提供了极大的便利,例如加载广告、...

    js实现iframe自适应高度

    这个简单的JavaScript解决方案能帮助我们实现`iframe`的高度自适应,使得内容始终完全显示,避免滚动条的出现。然而,实际应用中可能还会遇到其他复杂情况,如延迟加载、动态插入的`iframe`等,这时可能需要结合更多...

    iframe跨域自适应高度模板

    同时,`iframe`内容的动态加载可能使得其高度不固定,如果不能自适应高度,可能会导致页面布局出现问题。本模板将介绍如何处理`iframe`的跨域和自适应高度这两个关键问题。 首先,让我们了解`iframe`跨域。由于同源...

    完整可行、浏览器兼容、通过测试的Iframe高度自适应程序

    1. **Iframe高度自适应原理** - 通常,Iframe的高度是由其内容决定的,但浏览器默认并不会自动更新其高度以适应内容的变化。为了解决这个问题,我们需要编写JavaScript代码来检测Iframe内部页面的加载状态,并根据...

    iframe自适应高度和宽度

    然后通过`document.all['myframe']`获取到`iframe`元素,并通过`myframe.document.body.scrollHeight`获取内部文档的实际高度,最后将这个高度设置给`iframe`元素的`height`属性,从而实现高度自适应。 #### 四、...

    iframe自适应高度兼容各主流浏览器

    在实现iFrame的高度自适应时,需要判断当前浏览器的类型,以便对其进行特殊处理。这里可以使用`navigator.userAgent`来获取浏览器的User Agent信息,然后根据其信息来判断浏览器的类型。 知识点6:浏览器版本的判断...

    iframe高度自适应 js

    ### iframe高度自适应JS知识点详解 #### 一、概述 在网页开发中,经常会遇到需要将一个页面嵌入到另一个页面中的场景,这时就需要用到`&lt;iframe&gt;`标签。但是,默认情况下,`&lt;iframe&gt;`的高度是固定的,这往往会导致...

    iFrame高度自适应终极解决方案(兼容IE7,8,9 Firefox3.6+,Chrome 12+)

    "iFrame高度自适应终极解决方案(兼容IE7,8,9 Firefox3.6+,Chrome 12+)"这个标题所指向的,就是一种跨浏览器的策略,确保iFrame内容无论何时更新,都能自动调整其高度,从而避免滚动条的出现和内容溢出。...

    iframe自适应高度(兼容目前所有主浏览器)

    iFrame 自适应高度(兼容所有主浏览器) iFrame 自适应高度是前端开发中常见的问题,很多开发者在搜索引擎中搜索相关解决方案,但大多数文章只能解决静态高度的问题,而忽视了 JS 操作 DOM 之后的动态同步问题。...

    可编辑iframe高度自适应(编辑器所见即所得模式)

    标题提到的“可编辑iframe高度自适应”问题,主要涉及如何确保`iframe`的高度能根据其内容动态调整,从而提供良好的用户体验,避免滚动条的出现或页面布局的混乱。`iframe`高度自适应是解决这个问题的关键技术。 ...

    iframe自适应高度(兼容多种浏览器)

    因此,实现`iframe`的高度自适应对于优化用户体验、提高页面美观度具有重要意义。 #### 一、需求分析 本案例的目标是实现`iframe`自适应高度的功能,并确保其能够在不同的浏览器环境下正常工作。这里所说的“多种...

Global site tag (gtag.js) - Google Analytics