Question

我希望使用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>

Answer 1

如果您的第一个iframe

，则html的大小是大小

这是因为你在第二个position: absolute中使用iframe它在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>

这样，他们都会在html和body

内

还将html和body的高度设置为100%，使两个iframe占据全高

html,body{
  width: 100%;
  height: 100%;
}

看看我的codepen http://codepen.io/war_lock1221/pen/XMzXWb

Answer 2

这是因为你的第二个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/

并排显示两个iFrame

2 个答案: