如何将 2 个 iframe 并排放置？

Question

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

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

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

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

我创建了一个小提琴来向你展示我到目前为止所做的事情

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. 由于某种原因，页脚背景的颜色也显示在 iframe 下方。
2. 第二个问题是我在左侧 iframe 中使用了 25% 的宽度，它应该设置为 140 像素
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 块代替。
2. 使用width: calc(100% - 140px) 创建您的右列。
3. 高度使用 100vh 而不是 100%；
4. 页脚会出现问题，因为 100% + 无论页脚大小总是大于页面高度。最简单的解决方案是固定页脚的大小，并将其用于高度计算。
5. 我添加了html,body { margin:0; padding: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>

Answer 2

要让它们并排显示，有几个选项，在这种情况下，最简单的似乎（对我来说，意见不同），将float:left; 添加到两个框架。

至于框架没有占满高度的问题，您可以使用height:100vh，即视口高度的100%。

至于页脚位于 iframe 的后面以及它们的下方，这是通过强制页脚始终浮动在页面底部来解决的。这可以通过使用position:absolute 和bottom:0 以及left:0 来完成

至于宽度必须为 140 像素，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>

CSS

html,
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;
}

更新Fiddle

希望这会有所帮助！

Answer 3

如果您要拥有多个基本上填满整个页面的 iFrame，为什么不使用框架集呢？

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

这样可以一次性解决所有问题。