Html 如何将其转换为iFrame_Html

Html 如何将其转换为iFrame

html

Html 如何将其转换为iFrame,html,Html,正如评论中所指出的，我认为转换为iFrame不是一条好路。框架和iFrame的行为方式使得它们在很多情况下都很难使用，并且常常使网站的开发和维护变得更加困难也许你应该试着问另一个问题。它应该包括您遇到的最初问题（人们建议您首先切换到iFrame的问题），并看看这里的人想出了什么解决方案。对于几乎每一个问题，都会有至少一个不涉及使用框架或iframe的好答案（少数例外）一句话：你问错了问题。如果您不坚持使用iFrame，我们可能可以更好地帮助您解决原始问题。问题是将页面划分为具有确定长度的页眉

正如评论中所指出的，我认为转换为iFrame不是一条好路。框架和iFrame的行为方式使得它们在很多情况下都很难使用，并且常常使网站的开发和维护变得更加困难

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

一句话：你问错了问题。如果您不坚持使用iFrame，我们可能可以更好地帮助您解决原始问题。

问题是将页面划分为具有确定长度的页眉、具有确定宽度的左侧导航栏和具有剩余100%宽度和高度的休息区。您可以尝试：（使用纯css、自然流、避免相对、绝对定位和浮动，旧IE除外）

用标题/导航栏的尺寸填充父div

然后显示子项并应用CSS3 Boxsize属性，然后

通过对（第一个）子级应用负边距来撤消填充

用于演示的边框和背景。使用display写入的输出：内联块，但（旧）IE除外。字体大小：0以防止iframe后出现空白。这里没有什么原创的东西，而是相当微妙的编码

CSS

HTML


上割台
这里是导航栏
浏览器不支持内嵌框架

很糟糕。如果我们忽略了框架的所有问题，那么这两个工具是为不同的目的而设计的，不能（也不应该）简单地相互替代。@Kirk-好的，我将用“sanely”来限定“cannot”。@user:也许可以解释一下为什么要使用框架？我可以想出一个理由（这就是为什么我认为不推荐框架是错误的；仍然存在边缘情况，它们是最好的选择），但我不想说什么，我想知道你试图通过使用框架（传统或iframe）解决的实际设计问题是什么@user521180-你还没有构造出一个能让真正有建设性的答案变得容易的问题。你试图用一种为不同目的而设计的技术来模拟一个有问题的东西，因为“人们”告诉你要这样做。真正可以说的是“不要”。为什么这个问题被否决了？尽管这可能是一个错误的问题，目标也不是你建议某人努力实现的目标，但在我看来，这个问题本身既不清楚也不恰当。这只是一个评论，而不是一个答案。：-）（顺便说一句，我同意你关于“为什么否决票”的观点，尽管我认为有一点“这是我尝试过但没有成功的东西”会很好。）@user:如果你回答我的问题，从“不，这是解决方案的效果…”开始，或者斯蒂芬的问题，我们可能会帮助你。

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

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 */

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