iframe根据分辨率自适应高度问题

丶雨过天晴 2012-06-08 02:44:31
该怎么让固定高度改为自适应高度 





<script type="text/javascript">



 	function switchStatus()

	{

		var t=document.getElementById("t");//获得需要隐藏的元素

		var s=document.getElementById("s");//获得点击的元素

		if(s.alt=="隐藏"){

			t.style.display="none";

			s.alt="显示";

		}else{

			t.style.display="";

			s.alt="隐藏";

		}

		//$("#t").attr("style","display:none");

	}

	function switchStatus2()

	{

		var t=document.getElementById("t2");//获得需要隐藏的元素

		var s=document.getElementById("i");//获得点击的元素

		var c=document.getElementById("c");//获取main所在的表格

		var main=document.getElementById("main");//获得main所在的iframe

		if(s.alt=="隐藏"){

			t.style.display="none";

			s.alt="显示";

			c.height="693";

			main.height="693";

		}else{

			t.style.display="";

			s.alt="隐藏";

			c.height="433";

			main.height="433";

		}

		//$("#t").attr("style","display:none");

	}

</script>



	</head>



	<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0"

		marginheight="0">

		<table width="100%" border="0" cellspacing="0" cellpadding="0"

			align="center">

			<tr bgcolor="#0C4E86">

				<td height="124">

					<iframe id="top" frameborder=0 scrolling="no" name="top"

						src="<%=path%>/index.action?m=toTop" width="100%"

						height="100%"></iframe>

				</td>

			</tr>

		</table>

		<div style="width: 100%;height: 700px;">

					<table id="c" width="100%" border="0" cellspacing="0" cellpadding="0" height="433"

						align="center">

							<tr>

								<td id="t" width="209" height="100%" bgcolor="104A7F" valign="top">

									<iframe id="left" frameborder=0 scrolling="no" name="left"

										src="<%=path%>/index.action?m=toLeft" width="100%"

										height="100%"></iframe>

								</td>

								<td width="7" height="100%" background="resources/images/index-3.gif"

									valign="top">

									<table width="7" border="0" cellspacing="0" cellpadding="0"

										height="230">

										<tr valign="bottom">

											<td>

												<img id="s" src="resources/images/index-4.gif" width="7"

													height="80" border="0" onclick="switchStatus()" alt="隐藏"

													style="cursor: pointer">

											</td>

										</tr>

									</table>

								</td>

								<td height="100%" bgcolor="#4597CE" align="center" valign="top">

								<!-- 

									<table width="100%" border="0" cellspacing="0" cellpadding="0">

										<tr>

											<td height="6"></td>

										</tr>

									</table>

								  -->	

									

									<table width="100%" border="0" cellspacing="0" cellpadding="0">

										<tr>

											<td height="100%">

												<iframe id="main" frameborder="0" scrolling="no" name="main"

													src="<%=path%>/devControl.action?m=tomain" width="100%"

													height="433"></iframe>

											</td>

										</tr>

									</table>

								</td>

							</tr>

					</table>

					<table width="100%" border="0" cellspacing="0" cellpadding="0" 

						align="center">

						<tr align="center">

							<td background="resources/images/index-6.gif" height="7">

								<img id="i" src="resources/images/index-5.gif" width="81"

									height="7" style="cursor: pointer;" border="0" alt="隐藏"

									onclick="switchStatus2()">

							</td>

						</tr>

					</table>

					<table id="t2" width="100%" border="0" cellspacing="0" cellpadding="0" height="260"

						align="center">

						<tr bgcolor="146099">

							<td width="44%" align="center" valign="top">

								<iframe id="table" frameborder=0 scrolling="no" name="table"

									src="<%=path%>/index.action?m=toTable" width="100%"

									height="100%"></iframe>

							</td>

							<td width="24">

								<img src="resources/images/index-12.jpg" width="5" height="259">

							</td>

							<td width="55%" valign="top" align="center">

								<iframe id="table2" frameborder=0 scrolling="no" name="table2"

									src="<%=path%>/index.action?m=toTable2" width="100%"

									height="100%"></iframe>

							</td>

						</tr>

					</table>

		</div>	

		<table width="100%" border="0" cellspacing="0" cellpadding="0" 

			align="center">

			<tr bgcolor="074574">

				<td height="70">

					<iframe id="bottom" frameborder=0 scrolling="no" name="bottom"

						src="<%=path%>/index.action?m=toBottom" width="100%"

						height="100%"></iframe>

				</td>

			</tr>

		</table>

		<span class="12_hui"></span>

		<span class="12_hui"></span>

	</body>
...全文
472 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
jiabajiaba888 2012-09-18
  • 打赏
  • 举报
 回复
iframe 麻烦事儿呀
不仅得根据分辨率自适应高度还得根据内容自适应
brightyq 2012-06-09
  • 打赏
  • 举报
 回复
只是用百分比的方式有可能解决不了frame自适应的问题，要用JS去调整。
关于frame自适应的问题网上有很多帖子给出了解决方案。楼主打开google，就搜“iframe 自适应”，很多的。
MiceRice 2012-06-09
  • 打赏
  • 举报
 回复
从你程序HTML的层次关系来看，是：
<table id="c" width="100%" border="0" cellspacing="0" cellpadding="0" height="433"
align="center">
<iframe id="main" frameborder="0" scrolling="no" name="main" width="100%" height="433"></iframe>


那么把main的高度设置为 100%的话，还有期间的所有TD、TR、TABLE的height都设置成100%，那么它就会随着 c 的高度变化而变化了。

快信科技 2012-06-09
  • 打赏
  • 举报
 回复
可以试下百分比，或者在你需要自动扩展的部分搞个*，表示除其它外这个frame是自动扩展的吧。
iframe根据页面内容自适应高度和宽度
iframe根据引用的页面内容自适应高度和宽度，直接查看例子，简单易操作
IBM WebSphere Portal门户开发笔记01
四、高级探索：开发自适应分辨率的主题与皮肤 160 五、高手过招：更改Portal系统的登录方式； 161 十、主题：IBM WEBSPHERE PORTAL 6.1项目实施与开发、配置技巧集锦 164 1、更改PORTAL默认的登录选项 164 十一、...
ASP.NET毕业设计辅导 咖啡在线商城销售系统的设计与实现
设计重点与难点，明确图片上传时数据操作类的实现过程，掌握iframe框架在设计系统界面时的简单方法，该课程将以实战的方式来对代码进行讲解，本课程讲解的内容将围绕毕业设计答辩易考问题进行讲解。 注意：学院会员...
《程序天下：JavaScript实例自学手册》光盘源码
5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉...
程序天下:JavaScript实例自学手册
5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉...
Web 开发

81,091

社区成员

341,719

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章