두 개의 iFrames를 나란히 표시합니다.

iFrames를 사용하여 두 버전의 웹 페이지를 나란히 표시하고 싶지만 크기 및 위치 속성에 문제가 있습니다. 그것은 당신이 두 번째 Iframe에에 position: absolute;을 가지고 있기 때문에, 그것을 제거하고 다른 같은 작품이다두 개의 iFrames를 나란히 표시합니다.

<!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에 position: absolute을 사용 때문입니다

이 밖에 html과 body 그리고 그러므로 그것은 전체 높이가 html 높이가 아닌

을 보았다.

<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{ 
    width: 100%; 
    height: 100%; 
}

이보고에서이 전체 높이를 차지하게 html 내부와 body

html 및 body의

도 설정 높이 100%에있을 것입니다 이런 식으로 codepen 내 코드 번호 http://codepen.io/war_lock1221/pen/XMzXWb

출처

2017-04-26 16:54:06 Ani

잘 작동합니다. 감사합니다! – Sis

그것이 도움이 되었다면 내 대답을 upvoting 고려 :) – Ani

(왼쪽 하나는 내가 100로 설정에도 불구하고 작은 높이로 표시 할 것).

는

코드 : 나는 JsFiddle 만든

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

- 첫 번째 iframe이 경우 HTML의 https://jsfiddle.net/5m5oy7fj/

출처

2017-04-26 16:48:56

thanks :) 그러나 웹 페이지가 아직 완전히로드되지 않은 것 같습니다. – Sis

두 개의 iFrames를 나란히 표시합니다.

답변

관련 문제