<%@ 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%的效果。
html,body,form{height:100%}另外,既然是自适应高度,外面设置的css就没有作用了啊
<%@ Page Language="C#" %><!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 id="Head1" runat="server">
<title>多画面显示</title>
<style type="text/css">
html, body, form
{
height: 100%;
}
.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>
</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='Default10.aspx'
width="100%"></iframe>
</div>
<div class="b2">
<iframe id="if_right_top" scrolling="no" frameborder="0" height="100%" src="Default10.aspx"
width="100%"></iframe>
</div>
<div class="b3">
<iframe id="if_left_bottom" scrolling="no" frameborder="0" height="100%" src="Default10.aspx"
width="100%"></iframe>
</div>
<div class="b4">
<iframe id="if_right_bottom" scrolling="no" frameborder="0" height="100%" src="Default10.aspx"
width="100%"></iframe>
</div>
</div>
</div>
</form>
</body>
</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">所以百度、asp.net错误页面,iframe取得的高度都是不正确的。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="DHM_test" %><!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 id="Head1" runat="server">
<title>多画面显示</title>
<style type="text/css">
html, body, form
{
height: 100%;
}
.top
{
background-color: #FFFFFF;
width: 100%;
height: 100%;
}
.top .a1
{
float: left;
width: 100%;
height: 50%;
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>
</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="50%" src="http://www.baidu.com"
width="100%"></iframe>
</div>
<div class="b2">
<iframe id="if_right_top" scrolling="no" frameborder="0" height="50%" src="http://www.baidu.com"
width="100%"></iframe>
</div>
<div class="b3">
<iframe id="if_left_bottom" scrolling="no" frameborder="0" height="50%" src="http://www.baidu.com"
width="100%"></iframe>
</div>
<div class="b4">
<iframe id="if_right_bottom" scrolling="no" frameborder="0" height="50%" src="http://www.baidu.com"
width="100%"></iframe>
</div>
</div>
</div>
</form>
</body>
</html>
<table style="width:100%">
<tr>
<td style="width:50%"><ifram style="width:100%" onload='IFrameReSize("if_left_top");' id="if_left_top"></iframe></td><td style="width:50%"></td>
</tr>
<tr>
<td style="width:50%"></td><td style="width:50%"></td>
</tr>
</table>
div float的做法如果内容不是一个高度,可能会错位的。另外,没有设置width设置高度是采用css,必须加px <script type="text/javascript">
//iframe高度自适应
function IFrameReSize(iframename) {
var pTar = document.getElementById(iframename);
if (pTar) { //ff
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {
pTar.style.height = pTar.contentDocument.body.offsetHeight + "px";
} //ie
else if (pTar.Document && pTar.Document.body.scrollHeight) {
pTar.style.height = pTar.Document.body.scrollHeight + "px";
}
}
}
</script>