並排顯示兩個iFrame

我想使用iFrames並排顯示兩個版本的網頁，但我遇到了一些大小和位置屬性的麻煩。（左一個似乎與即使我將其設置爲100較小的高度顯示）並排顯示兩個iFrame

<!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>

來源

2017-04-26 Sis

尺寸大小，如果你的第一個iframe中

那是因爲你在第二iframe使用position: absolute是外HTML和身體，因此它佔據整個高度不是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%使雙方的I幀佔據全高

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

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

來源

2017-04-26 16:54:06 Ani

工作正常，謝謝！ – Sis

考慮我的回答是否有幫助:) – Ani

那是因爲你對你的第二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 - 你的HTML的https://jsfiddle.net/5m5oy7fj/

來源

2017-04-26 16:48:56

謝謝:)，但似乎網頁仍然沒有完全加載 – Sis

並排顯示兩個iFrame

回答

相關問題