将 FRAMESET 转换为 IFRAME答案

【问题标题】：Convert FRAMESET to IFRAME将 FRAMESET 转换为 IFRAME
【发布时间】：2015-03-10 00:06:38
【问题描述】：

我正在尝试将一些使用 FRAMESET 的旧代码转换为使用 IFRAME 或 DIV。旧代码产生两个垂直框架，左边一个最初是窗口的 30%。用户可以移动分割线来改变比例。旧代码（精简）是：

<HTML>
<HEAD>
</HEAD>
    <FRAMESET frameSpacing="3" frameBorder="0" cols=30%,* >
    <FRAME id="contentGenerator" src="content.html"  scrolling="no">
    <FRAME id="content" src="startNSM.html" >
    </FRAMESET>
</HTML>

到目前为止我得到的是：

<HTML>
<HEAD>

<STYLE>
#cgDiv {
    HEIGHT: 100%; WIDTH: 30%; VERTICAL-ALIGN: top; POSITION: fixed
}
#contentGenerator {
    HEIGHT: 100%    
}
#cDiv {
    HEIGHT: 100%; WIDTH: 70%; VERTICAL-ALIGN: top; POSITION: relative
}
#content {
    HEIGHT: 100%
}
</STYLE>
</HEAD>
<BODY >
<DIV id="cgDiv">
    <IFRAME id="contentGenerator" src="content.html">
    </IFRAME>
</DIV>
<DIV id="cDiv">
    <IFRAME id="content" src="startNSM.html">
    </IFRAME>
</DIV>
</BODY>
</HTML>

这样做是在 30% 的窗口中显示第一个 IFRAME，而不是第二个框架。有什么建议吗？

【问题讨论】：

标签： html iframe frameset

【解决方案1】：

尝试将 CSS 更改为以下内容

#cgDiv {
    display: inline-block;
    height: 100%;
    vertical-align: top;
    width: 30%;
}

#contentGenerator, #content {
    height: 100%;
    width: 100%;
}

#cDiv {
    display: inline-block;
    height: 100%;
    vertical-align: top;
    width: 69.5%;
}

body { margin: 0}

【讨论】：

谢谢，但还是不行。我不应该说第二帧没有出现。一些帧边界出现在窗口底部，在第一帧的右侧。现在唯一的区别是第二帧看起来是正确的宽度。它仍然没有与窗口的顶部对齐。
哦对不起我的错，我忘了删除'margin-left: 30%;'来自#cDiv。另外，我在窗口边框和框架边框之间有一个空格，添加 body {margin: 0} CSS 规则应该会有所帮助。我在上面编辑了我的答案
一般建议：要解决此类问题，带有 firebug 扩展的 Firefox 浏览器是最好的工具。它可以让你在浏览器中以所见即所得的方式尝试你的 CSS 规则