Html 将框架集转换为IFRAME_Html_Iframe_Frameset

Html 将框架集转换为IFRAME

html iframe

Html 将框架集转换为IFRAME,html,iframe,frameset,Html,Iframe,Frameset,我正在尝试将一些使用FRAMESET的旧代码转换为使用iframe或div。旧代码生成两个垂直框架，左侧框架最初占窗口的30%。用户可以移动分割线来更改比例。旧代码（精简）为：到目前为止，我得到的是： <HTML> <HEAD> <STYLE> #cgDiv { HEIGHT: 100%; WIDTH: 30%; VERTICAL-ALIGN: top; POSITION: fixed } #contentGenerator { HEI

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

到目前为止，我得到的是：

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


#cgDiv{
高度：100%；宽度：30%；垂直对齐：顶部；位置：固定
}
#内容生成器{
身高：100%
}
#cDiv{
高度：100%；宽度：70%；垂直对齐：顶部；位置：相对
}
#内容{
身高：100%
}

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

尝试将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}

谢谢，但还是不行。我不应该说第二帧没有出现。框架边界的一部分出现在窗口底部，第一个框架的右侧。现在唯一的区别是第二帧看起来是正确的宽度。它仍然没有与窗口顶部对齐。哦，对不起，我的错，我忘了删除“左边距：30%”从#cDiv。另外，在窗口边框和框架边框之间有一个空格，添加body{margin:0}CSS规则应该会有所帮助。我在上面编辑了我的答案，并给出了一个一般性的建议：为了解决这样的问题，带有firebug扩展的Firefox浏览器是最好的工具。它允许您在浏览器中以所见即所得的方式尝试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}