.NET社区
使用过iframe的同志们过来看看下
墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网
我也要 关注 + 加入社区
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="center.aspx.cs" Inherits="DHM_center" %>
<!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 runat="server">
<title>多画面显示</title>
<style type="text/css">
.top
{
background-color: #FFFFFF;
width: 100%;
height: 100%;
}
.top .a1
{
float: left;
width: 100%;
height: 100%;
background-color: White;
}
.top .a1 .b1
{
background-color: white;
float: left;
width: 50%;
height: 100%;
}
.top .a1 .b2
{
background-color: white;
float: left;
width: 50%;
height: 100%;
}
.top .a1 .b3
{
background-color: white;
float: left;
width: 50%;
height: 100%;
}
.top .a1 .b4
{
background-color: white;
float: left;
width: 50%;
height: 100%;
}
</style>
<script type="text/javascript">
//iframe高度自适应
function IFrameReSize(iframename) {
var pTar = document.getElementById(iframename);
if (pTar) { //ff
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {
pTar.height = pTar.contentDocument.body.offsetHeight;
} //ie
else if (pTar.Document && pTar.Document.body.scrollHeight) {
pTar.height = pTar.Document.body.scrollHeight;
}
}
}
//iframe宽度自适应
function IFrameReSizeWidth(iframename) {
var pTar = document.getElementById(iframename);
if (pTar) { //ff
if (pTar.contentDocument && pTar.contentDocument.body.offsetWidth) {
pTar.width = pTar.contentDocument.body.offsetWidth;
} //ie
else if (pTar.Document && pTar.Document.body.scrollWidth) {
pTar.width = pTar.Document.body.scrollWidth;
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="top">
<div class="a1">
<div class="b1">
<iframe id="if_left_top" scrolling="no" frameborder="0" height="100%" src='<%=url1%>' width="100%" onload='IFrameReSize("if_left_top");IFrameReSizeWidth("if_left_top");' ></iframe>
</div>
<div class="b2">
<iframe id="if_right_top" scrolling="no" frameborder="0" height="100%" src="<%=url2%>" width="100%" onload='IFrameReSize("if_right_top");IFrameReSizeWidth("if_right_top");' ></iframe>
</div>
<div class="b3">
<iframe id="if_left_bottom" scrolling="no" frameborder="0" height="100%" src="<%=url3%>" width="100%" onload='IFrameReSize("if_left_bottom");IFrameReSizeWidth("if_left_bottom");' ></iframe>
</div>
<div class="b4">
<iframe id="if_right_bottom" scrolling="no" frameborder="0" height="100%" src="<%=url4%>" width="100%" onload='IFrameReSize("if_right_bottom");IFrameReSizeWidth("if_right_bottom");'></iframe>
</div>
</div>
</div>
</form>
</body>
</html>
以上在一个页面中使用了四个iframe，可是效果是这样的，高度只有一半，不是很了解。
也尝试使用过table布局，两行两列，但都没实现高度100%的效果。
...全文
相关推荐
iframe使用实例
iframe使用实例，简单名了，演示iframe的基本功能
iframe框架使用(完美版)
iframe使用 自适应高度 封装js
HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法
就想弄一个winform结合html5的一个小东西，突有心血来潮，想在里面嵌套一个微信网页版，下面小编给大家介绍下HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法，一起看看吧
使用iframe window的scroll方法控制iframe页面滚动
在页面中如何控制内嵌的iframe滚动呢？方法是使用iframe window的scroll方法，大家可以参考下面的示例
使用Iframe实现TAB页面切换
NULL 博文链接：https://13813962825.iteye.com/blog/2067021
