并排显示两个 iFrame答案

【问题标题】：Displaying two iFrames side by side并排显示两个 iFrame
【发布时间】：2020-07-04 19:51:01
【问题描述】：

我想使用 iFrame 并排显示网页的两个版本，但我在大小和位置属性方面遇到了一些问题。（虽然我设置为 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>

【问题讨论】：

标签： html css iframe

【解决方案1】：

你的 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>

这样他们两个都会在html和body里面

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

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

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

【讨论】：

如果我的回答有帮助，请考虑支持 :)

【解决方案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/

【讨论】：

谢谢 :) ，但网页似乎还没有完全加载