Question

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

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

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

我使用precentage时可以使用它。但百分比的问题是左侧菜单有时显示非常宽

我创造了一个小提琴，告诉你到目前为止我做了什么

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

正如您所知，我的代码存在一些问题。

由于某种原因，页脚背景的颜色也显示在iframs下面。
第二个问题是我使用25％宽度的左iframe，它应该设置为140px
最后，iframe的高度不会占据整个屏幕的高度。

如何纠正上述问题？

EDITED 我也尝试使用Table来完成工作，但左边的iframe没有正确的宽度。这是一个更新的小提琴，向您展示 http://jsfiddle.net/mwg3j17d/19/

Answer 1

您可以使用width: calc(100% - 140px)创建正确的列。此外，您的.b_footer样式太大（10px填充+ 100％+ 10px填充），因为您没有指定box-sizing: border-box，所以我添加了它。

使用float从正常的html流中取出元素，并且具有如果您不完全理解它们会产生奇怪的副作用。使用显示：内联块代替。
使用width: calc(100% - 140px)创建合适的列。
使用100vh代替高度而不是100％;
您的页脚会出现问题，因为100％+页脚大小始终大于页面高度。最简单的解决方案是修复页脚的大小，并在高度计算中使用它。
我已添加html,body { margin:0; padding:0; }以删除边距和填充。如果需要，可以手动添加它们，以便所有浏览器都使用相同的值，并使用宽度/高度计算中的新值。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

要在彼此旁边显示它们，有几个选项，在这种情况下，最简单的似乎（对我而言，意见不同），将float:left;添加到两个帧。

对于没有占据整个高度的帧的问题，为此您可以使用height:100vh，这意味着100％的视口高度。

对于在iframe后面以及在iframe之下的页脚，通过强制页脚始终浮动在页面底部来固定。这可以通过position:absolute和bottom:0以及left: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>

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

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

这可以立即解决所有问题。

如何将2个iframe放在一起？

3 个答案: