html - 如何将 2 个 iframe 并排放置？

Question

我需要创建一个页面，其中有 2 个相邻的 iframe，高度为 100%。

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

由于有不同尺寸的屏幕，我无法在右侧 iframe 上设置一个固定的，因为我希望它在第一个 140 像素之后占据所有屏幕；

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

我创建了一个 fiddle 来向您展示我到目前为止所做的事情

http://jsfiddle.net/mwg3j17d/16/

#main_block {
  display: block;
  width: 100% height: 100%;
}
#left_frame {
  width: 25%;
}
#right_frame {
  width: 75%;
}
#left_frame,
#right_frame {
  float: left;
}
iframe {
  box-sizing: border-box;
}
.b_footer {
  padding: 10px;
  width: 100%;
  background-color: blue;
  text-align: center;
  color: white: font-weight: bold;
}

<div id="main_block">
  <iframe id="left_frame" src=""></iframe>
  <iframe id="right_frame" src=""></iframe>
</div>

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

如您所知，我的代码有几个问题。

1. 出于某种原因，页脚背景的颜色也显示在 ifram 下方。
2. 第二个问题是我为左边的 iframe 使用了 25% 的宽度，它应该设置为 140px
3. 最后，iframe 的高度没有占据整个屏幕的高度。

如何解决上述问题？

已编辑我还尝试使用 Table 来完成工作，但左侧 iframe 的宽度不正确。这是一个更新的 fiddle 给你看 http://jsfiddle.net/mwg3j17d/19/

Answer 1

您可以使用 width: calc(100% - 140px) 创建您的右栏。此外，您的 .b_footer 样式太大(10px padding + 100% + 10px padding)，因为您没有指定 box-sizing: border-box，所以我添加了

1. 使用 float 将元素从正常的 html 流中分离出来，并具有如果您不完全理解它们，会产生奇怪的副作用。使用display:inline block 代替。
2. 使用 width: calc(100% - 140px) 创建您的右列。
3. 使用 100vh 作为高度而不是 100%；
4. 页脚会有问题，因为 100% + 无论页脚大小总是大于页面高度。最简单的解决方案是固定页脚的大小，并在高度计算中使用它。
5. 我添加了 html,body { margin:0;填充:0； } 删除边距和填充。如果您需要它们，请手动将它们添加回来，以便所有浏览器都使用相同的值，并在您的宽度/高度计算中使用新值。

html,body { margin:0; padding: 0; }
#main_block {
  display: block; /* Useless, divs are display:block */
  width: 100%;    /* Useless, display:block elements are width:100% by default */
  height: 100%;   /* Fairly useless now, should take children's height */
  font-size:0;    /* Force space between inline-block elements to be 0 */
}
#left_frame {
  width: 140px;
}
#right_frame {
  width: calc(100% - 140px);
}
#left_frame,#right_frame {
  display: inline-block;
  box-sizing: border-box;
  height: calc(100vh - 50px);
}
.b_footer {
  padding: 10px;
  height: 50px;
  background-color: blue;
  text-align: center;
  color: white;
  font-weight: bold;
  box-sizing: border-box;
}

<div id="main_block">
  <iframe id="left_frame" src=""></iframe>
  <iframe id="right_frame" src=""></iframe>
</div>

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