logo标签列表

在同一页面上并排显示两个 iFrame

htmlcssiframe
5

我想利用 iFrames 来并排显示网页的两个版本，但是在设置大小和位置属性时遇到了一些问题。（即使我将左侧的大小设为 100，它似乎仍然以较小的高度显示）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Split</title>
</head>
<body>

     <iframe src="link_v1" frameborder="0" scrolling="yes"                           
                                    style="overflow: hidden; height: 100%; 
                                                width: 49%; float: left; " height="100%" width="49%"
                                   align="left">
                                  </iframe>  

     <iframe src="link_v2" frameborder="0" scrolling="yes"  
                                        style="overflow: hidden; height: 100%;
                                        position: absolute;
                                        width: 49%; " height="100%" width="49%"                                 
                                         align="right">
                                        </iframe>
</body>
</html>
2个回答
7

您的html大小与第一个iframe的大小相同

这是因为您在第二个iframe中使用了position: absolute，它位于html和body之外，因此它占用整个高度而不是html高度

请查看下面的codepen示例

 <iframe src="link_v1" frameborder="0" scrolling="yes"                           
                                style="height: 100%; 
                                            width: 49%; float: left; " height="100%" width="49%"
                               align="left">
                              </iframe>  

 <iframe src="link_v2" frameborder="0" scrolling="yes"  
                                    style="overflow: hidden; height: 100%;

                                    width: 49%; " height="100%" width="49%"                                 
                                     align="right">
                                    </iframe>

这样两个iframe就都在html和body里了。同时将html和body的高度设置为100%，使两个iframe占据整个页面高度。
html,body{
  width: 100%;
  height: 100%;
}

请看我的codepen http://codepen.io/war_lock1221/pen/XMzXWb。
如果我的回答有帮助，请考虑给我点赞 :) - Ani
0

这是因为你在第二个 iframe 上使用了 position: absolute;，移除它后就可以像其他的一样工作了。

代码：

<iframe src="https://pbs.twimg.com/profile_images/2808637462/af65ad1f02516c07887ebc47bd51f8fd.jpeg" frameborder="0" scrolling="yes"                           
                                    style="overflow: hidden; height: 100%; 
                                                width: 49%; float: left; " height="100%" width="49%"
                                   align="left">
                                  </iframe>  

 <iframe src="https://pbs.twimg.com/profile_images/2808637462/af65ad1f02516c07887ebc47bd51f8fd.jpeg" frameborder="0" scrolling="yes"                           
                                    style="overflow: hidden; height: 100%; 
                                                width: 49%; float: left; " height="100%" width="49%"
                                   align="left">
                                  </iframe>

我创建了一个 JsFiddle - https://jsfiddle.net/5m5oy7fj/

谢谢，但似乎网页仍未完全加载。 - Sis
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接