急求解:iframe框架不能100%显示问题
请问我做一网页
需要顶部div高度固定,宽度100%,下面放一个iframe框架
框架左侧div宽固定,高度100%,右侧宽高都是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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*
{font-size:12px; margin:0; padding:0;}
body,html{width:100%; height:100%;}
.menu{ float:left;width:165px;height:41px;line-height:41px;font-size:16px;font-weight:bold;text-align:center;cursor:pointer;border-right:1px solid #dfdfdf;}
.content
{width:100%;height:100%;}
.contentframe{width:100%;height:100%;}
</style>
</head>
<body>
<div style="width:100%; background:#CCCCCC; height:60px;">
<span class="menu menuBackground"><a href="1.htm" target="contentframe">栏目一</a></span>
<span class="menu"><a href="2.htm" target="contentframe">栏目二</a></span>
<span class="menu"><A href="3.htm" target="contentframe">栏目三</A></span>
</div>
<div class="content" id="content" >
<iframe scrolling="no" frameborder="0" src="1.htm" class="contentframe" name="contentframe" id="contentframe"></iframe>
</div>
</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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
<style>
*{font-size:12px; margin:0; padding:0;}
body,html{width:100%; height:100%;margin:0; padding:0;}
.content{width:100%;height:100%;}
.contentframe
{width:100%;height:100%;}
</style>
</head>
<body>
<div style="width:250px; height:100%; float:left; background:#99C">
<a href="2.htm" target="rightframe">fsdf</a><br />
<a href="3.htm" target="rightframe">fsfsafsa</a>
</div>
<div style=" float:left; background:#960; height:100%; position:relative">
<div class="content" id="content" >
<iframe scrolling="no" frameborder="0" src="2.htm" class="contentframe" name="rightframe" id="rightframe"></iframe>
</div>
</div>
</body>
</html>
框架 HTML iframe
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
<style>
*{font-size:12px; margin:0; padding:0;}
body,html{width:100%; height:100%;margin:0; padding:0;}
</style>
</head>
<body >
<div style="height:100%; width:100%; background:#ccc;">2页面内容</div>
</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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style>
body, html
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content
{
width: 100%;
height: 100%;
}
.contentframe
{
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
function setContentWidth() {
document.getElementById("content").style.width = document.body.clientWidth - 250 + "px";
}
</script>
</head>
<body onload="setContentWidth();">
<div style="width: 250px; height: 100%; float: left; background: #99C">
<a href="2.htm" target="rightframe">fsdf</a><br />
<a href="3.htm" target="rightframe">fsfsafsa</a>
</div>
<div style="float: left; background: #960; height: 100%; position: relative">
<div class="content" id="content">
<iframe scrolling="no" frameborder="0" src="2.htm" class="contentframe" name="rightframe"
id="Iframe1"></iframe>
</div>
</div>
</body>
</html>