首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

急求解:iframe框架不能100%显示有关问题

2013-08-09 
急求解:iframe框架不能100%显示问题请问我做一网页需要顶部div高度固定,宽度100%,下面放一个iframe框架框

急求解: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>


1.htm 页面

<!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>



2.htm 页面

<!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>
框架 HTML iframe
[解决办法]
div的自动撑满跟td不一样,不是左边250,右边100%就行的,需要自己计算一下div应有的宽度然后给相应的div设置。

你的1.html在load的时候判断一下浏览器的宽度,给content设置就行,简单的code如下,没有做详细的兼容性测试。

<!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>

热点排行