Html 如何将2个iFrame相邻放置？

我需要创建一个页面，其中我有两个iFrame彼此相邻，高度为100%

左框的固定宽度为140px，右框的宽度为屏幕其余部分的宽度。请记住，两个框架都需要100%的高度

因为有不同大小的屏幕，我不能在右边的iframe上设置一个fixed with，因为我希望它在第一个140px之后占据所有屏幕

我在使用Preventage时让它工作。但百分比的问题是，左菜单有时显示得很宽

我制作了一把小提琴来向你展示我迄今为止所做的一切

#主块{
显示：块；
宽度：100%高度：100%；
}
#左U形框架{
宽度：25%；
}
#右图框{
宽度：75%；
}
#左(u)帧,，
#右图框{
浮动：左；
}
iframe{
框大小：边框框；
}
.b_页脚{
填充：10px；
宽度：100%；
背景颜色：蓝色；
文本对齐：居中；
颜色：白色：字体大小：粗体；
}

页脚

您可以使用

宽度：calc（100%-140px）

创建右侧列。另外，您的

.b_footer

样式太大（10px填充+100%+10px填充），因为您没有指定

框大小：边框框

，所以我添加了它

使用float将元素从正常的html流中取出，并且 如果你不完全理解它们，就会产生奇怪的副作用。使用 显示：改为内联块

使用

width:calc（100%-140px）

创建右列

高度用100vh代替100%

您将遇到页脚问题，因为同样，100%+无论页脚大小如何，都将始终大于页面高度。最简单的解决方案是固定页脚的大小，并将其用于高度计算

我添加了

html，body{margin:0；padding:0；}

以删除边距和填充。如果需要，请手动重新添加，以便所有浏览器都使用相同的值，并在宽度/高度计算中使用新值

html，正文{margin:0；padding:0；}
#主块{
display:block；/*无用，div是display:block*/
宽度：100%；/*无用，显示：块元素默认为宽度：100%*/
身高：100%；/*现在没什么用了，应该是孩子的身高*/
字体大小：0；/*强制内联块元素之间的间距为0*/
}
#左U形框架{
宽度：140px；
}
#右图框{
宽度：计算（100%-140px）；
}
#左框，右框{
显示：内联块；
框大小：边框框；
高度：计算（100vh-50px）；
}
.b_页脚{
填充：10px；
高度：50px；
背景颜色：蓝色；
文本对齐：居中；
颜色：白色；
字体大小：粗体；
框大小：边框框；
}

页脚

您可以使用

宽度：calc（100%-140px）

创建右侧列。另外，您的

.b_footer

样式太大（10px填充+100%+10px填充），因为您没有指定

框大小：边框框

，所以我添加了它

使用float将元素从正常的html流中取出，并且 如果你不完全理解它们，就会产生奇怪的副作用。使用 显示：改为内联块

使用

width:calc（100%-140px）

创建右列

高度用100vh代替100%

您将遇到页脚问题，因为同样，100%+无论页脚大小如何，都将始终大于页面高度。最简单的解决方案是固定页脚的大小，并将其用于高度计算

我添加了

html，body{margin:0；padding:0；}

以删除边距和填充。如果需要，请手动重新添加，以便所有浏览器都使用相同的值，并在宽度/高度计算中使用新值

html，正文{margin:0；padding:0；}
#主块{
display:block；/*无用，div是display:block*/
宽度：100%；/*无用，显示：块元素默认为宽度：100%*/
身高：100%；/*现在没什么用了，应该是孩子的身高*/
字体大小：0；/*强制内联块元素之间的间距为0*/
}
#左U形框架{
宽度：140px；
}
#右图框{
宽度：计算（100%-140px）；
}
#左框，右框{
显示：内联块；
框大小：边框框；
高度：计算（100vh-50px）；
}
.b_页脚{
填充：10px；
高度：50px；
背景颜色：蓝色；
文本对齐：居中；
颜色：白色；
字体大小：粗体；
框大小：边框框；
}

页脚

要将它们相邻显示，有几个选项，在这种情况下，添加

浮动：左到两个帧

至于帧未达到全高的问题，为此您可以使用
高度：100vh
，这意味着视口高度的100%

对于iFrame后面和下面的页脚，这是通过强制页脚始终浮动在页面底部来修复的。这可以通过使用
位置：绝对
和
底部：0
以及
左侧：0

至于宽度必须为140px，
calc（100vw-140px）
在这里会很好

您的更新代码

HTML

<div id="main_block">
    <iframe src="http://www.w3schools.com" id="left_frame" src=""></iframe>
    <iframe src="http://www.w3schools.com" id="right_frame" src=""></iframe>

</div>
<div class="b_footer">
    Footer
</div>

已更新

希望这有帮助
 要将它们相邻显示，有几个选项，在这种情况下，最简单的方法是添加
float:left到两个帧

至于帧未达到全高的问题，为此您可以使用
高度：100vh
，这意味着视口高度的100%

对于iFrame后面和下面的页脚，这是通过强制页脚始终浮动在页面底部来修复的。这可以通过使用
position:absolute
和
bottom:0
以及
left:0html,
body {
    margin: 0;
    padding: 0;
}
#main_block {
    display: block;
    width: 100vw;
    min-height: 100%;
}
#left_frame {
    width: 140px;
}
#right_frame {
    width: -moz-calc(100% - 140px); width: -webkit-calc(100% - 140px); width: calc(100% - 140px);
}
#left_frame,
#right_frame {
    float: left;
    height:100vh;
}
iframe {
    box-sizing: border-box;
}
.b_footer {
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    top:100vh;
    background-color:blue;
    color:white;
    text-align:center;
}

<frameset rows="*,100">
  <frameset cols="140,*">
    <frame src="left.htm">
    <frame src="right.htm">
  </frameset>
  <frame src="footer.htm">
</frameset>