Question

</head>
    <frameset id="frameMain" rows="84,*" framespacing="0">
       <frame src="bannerFrame.html" id="mail" name="mail" frameborder="0" border="0" marginwidth="0" marginheight="0" noresize="noresize" scrolling="no"/>
       <frameset id="frameSet" cols="126,*" framespacing="0">
           <frame src="leftNavigation.html" id="leftnav" name="leftnav" frameborder="0" border="0" marginwidth="0" marginheight="0" noresize="noresize" scrolling="no"/>
           <frame src="empty.htm" id="main" name="main" frameborder="0" border="0" noresize="noresize" scrolling="yes"/>
       </frameset>
    </frameset>
</html>

Answer 1

正如评论中指出的那样，我认为转换为iFrame并非如此。框架和iframe的行为方式使得它们在很多情况下难以使用，并且经常使得开发和维护您的网站比应该更加困难。

也许你应该尝试提出另一个问题。它应该涉及你遇到的最初问题（人们建议你首先切换到iframe的问题）并看看这里的人们提出了什么解决方案。对于几乎每个问题，都会有至少一个不使用框架或iframe的好答案（除少数例外）。

底线：你问的是错误的问题。如果您不坚持使用iframe，我们可能会以更好的方式帮助您解决原始问题。

Answer 2

问题是将页面划分为具有确定长度的标题，具有确定宽度的左导航栏和具有剩余100％宽度，高度的休息区域。你可以试试这个:(使用纯css，自然流，避免相对，绝对定位和浮动，除了旧的IE）

使用标题/导航栏的尺寸填充父div
然后显示子项并应用CSS3 boxsizing属性，然后显示
通过对（第一个）孩子应用负边距来撤消填充

用于演示目的的边界和背景。使用display写入的输出：inline-block，（旧）IE除外。字体大小：0表示iframe之后的空格。这里没有任何原创，而是微妙的编码。

CSS

html, body  { height: 100%; margin:0;}
#container  { width:64em; margin:0 auto; }
#header     { background-color:steelblue; height: 5em; width:auto /*!*/;
          text-align:center; padding-top: 1px
        /* keep text within header to prevent scroll bar in body */; }
#navbar     { background-color:lightgrey; width:10em; text-align: center;}
.bbox   { box-sizing: border-box; -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box }
.disnav { -moz-inline-stack; display: inline-block; vertical-align:top;
          *display: block; *float:left}
.vat    { font-size: 0; vertical-align:top;} /* anti scroll in IE */
.padlt  { padding: 5em 0px 0px 10em} /* reserve space for bbox to crop  */
.undoleft { margin-left: -10em }     /* Undo padding and move to left */
.undotop  { margin-top: -5em }       /* Undo padding and move to top */
.h100   { height: 100% }         /* For iframe to extend vertically */ 
.w100   { width: 100% }          /* Fot iframe to extend horizontally */
.gapless { margin:0;}            /* to keep it simple */
.border  { border:thick dotted red;
          *border:0; };              /* no border for old IE */

HTML

</head>
<body class="h100 bbox border">
    <div id="container" class="h100 padlt bbox" >
    <div id="header"
         class="w100 undoleft undotop bbox" >
         <h1>Top Header</h1>
    </div>
    <div id="navbar" 
         class="h100 undoleft disnav bbox border"> 
         <h1>Navbar here</h1>
    </div><!--no Wspace here--><iframe  
                    id="content"
                        name="content" 
                    class="h100 w100 gapless vat bbox border"
                    src="http://www.bbcnews.com">  
        <p> Browser does not support inline frames
        </p></iframe><!--no Wspace here--></div>
</body></html>

我如何将其转换为iFrames

2 个答案: