238

iframe height = 100% รองรับในทุกเบราว์เซอร์หรือไม่?

ฉันใช้ doctype เป็น:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ในรหัส iframe ของฉันถ้าฉันพูดว่า:

<iframe src="xyz.pdf" width="100%" height="100%" />

ฉันหมายถึงจะใช้ความสูงของหน้าที่เหลืออยู่ (เนื่องจากมีอีกเฟรมหนึ่งที่ด้านบนมีความสูงคงที่ที่ 50px) นี่รองรับเบราว์เซอร์หลักทั้งหมด (IE / Firefox / Safari) หรือไม่

นอกจากนี้เกี่ยวกับแถบเลื่อนแม้ว่าฉันจะบอกว่าscrolling="no"ฉันเห็นแถบเลื่อนปิดการใช้งานใน Firefox ... ฉันจะซ่อนแถบเลื่อนและตั้งค่าความสูงของ iframe โดยอัตโนมัติได้อย่างไร

— testndtv
แหล่งที่มา

14

ดูจริงฉันไม่ได้ติดตั้งเบราว์เซอร์ทั้งหมด .. นอกจากนี้ยังมีรุ่นที่แตกต่างกัน .. เพียงแค่ต้องการให้แน่ใจว่ามันเป็นมาตรฐาน ..

— testndtv

1

คุณสามารถลองในตัวตรวจสอบความถูกต้องของ css

— Ruben

6

ใช่นั่นไม่ได้ให้ข้อผิดพลาด / คำเตือน ... แต่คำถามของฉันคือเบราว์เซอร์ทั้งหมดใช้ความสูง 100% จริงหรือ

— testndtv

สำหรับฉันคำตอบนี้ใช้ได้ดี: stackoverflow.com/questions/5272519/ …

— Zied Hamdi

276

คุณสามารถใช้ frameset เป็นสถานะคำตอบก่อนหน้านี้ แต่ถ้าคุณยืนยันในการใช้ iFrames ตัวอย่างที่ 2 ต่อไปนี้ควรใช้งานได้:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

ทางเลือก:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

หากต้องการซ่อนการเลื่อนโดยมี 2 ตัวเลือกดังแสดงไว้ด้านบน:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

แฮ็คด้วยตัวอย่างที่สอง:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

ในการซ่อนแถบเลื่อนของ iFrame ผู้ปกครองถูกสร้างขึ้นoverflow: hiddenเพื่อซ่อนแถบเลื่อนและ iFrame ถูกสร้างขึ้นให้มีความกว้างและความสูงไม่เกิน 150% ซึ่งบังคับให้แถบเลื่อนอยู่ด้านนอกของหน้าและเนื่องจากเนื้อหาไม่มีแถบเลื่อน อาจไม่คาดหวังว่า iframe จะเกินขอบเขตของหน้า นี่ซ่อนแถบเลื่อนของ iFrame ที่มีความกว้างเต็ม!

— ขวาน
แหล่งที่มา

3

ฟังดูดี .. เพียงแค่คำถามเดียว ... ทำไมเราต้องใช้ style = "height: 100%; width: 100%;" เมื่อใดก็ตามที่เราบอกว่า iframe height = "100%" width = "100%"

— testndtv

1

นอกจากนี้ IE เท่านั้นที่ไม่ได้รับความสูง 100% (ใช้เวลาประมาณ 200px ht) ... FF และ Safri ใช้ความสูงที่เหลือทั้งหมด ..

— testndtv

@ Boris Zbarsky ใช่ขอบคุณที่ให้ฉันรู้ว่า! ฉันได้อัปเดตโพสต์ทันที !! @hmthr คำถามแรกของคุณเกี่ยวกับแท็กคู่คือเนื่องจากเบราว์เซอร์ก่อนหน้าใช้แท็ก "ความสูง" และ "ความกว้าง" แต่ทำงานได้ไม่ดีกับแท็กสไตล์! เกี่ยวกับข้อผิดพลาด IE ฉันต้องการให้คุณติดกับรหัสแรกสำหรับกรณีที่

— ขวาน

15

ในการรับ iframe ให้ใช้อย่างถูกต้อง 100% พาเรนต์ต้องเป็น 100% ใน Doctypes ที่ใหม่กว่าแท็ก html และ body จะไม่อัตโนมัติ 100% เมื่อฉันเพิ่มความสูง: 100% สำหรับ html และเนื้อหาจากนั้นจะทำงานได้อย่างไม่มีที่ติ ดังนั้นฉันคิดว่าคำตอบที่ถูกต้องสำหรับคำถามนี้คือคำตอบจาก rudie ยกเว้นว่าฉันต้องรักษา xhtml doctype ของฉันไว้ นอกจากนี้โปรดทราบว่าไม่จำเป็นต้องใช้กฎการโอเวอร์โฟลว์ แถบเลื่อนจะทำงานตามที่ต้องการ - อัตโนมัติ

— Spiralis

3

คำตอบ SOนี้สั้นและดีมากเช่นกัน

— Uwe Keim

164

3 วิธีในการสร้างแบบเต็มหน้าจอ`iframe`:

วิธีที่ 1 - ความยาวเปอร์เซ็นต์การดูวิว

ในเบราว์เซอร์ที่สนับสนุนคุณสามารถใช้ความยาววิวพอร์ตเปอร์เซ็นต์height: 100vhเช่น

โดยที่100vhแสดงความสูงของวิวพอร์ตและเช่นเดียวกัน100vwแสดงความกว้าง

ตัวอย่างที่นี่
```
body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}
```
```
<iframe></iframe>
```
ขยายตัวอย่างข้อมูล

วิธีที่ 2 - แก้ไขตำแหน่ง

วิธีนี้ค่อนข้างตรงไปตรงมา เพียงแค่ตั้งค่าการวางตำแหน่งของfixedองค์ประกอบและเพิ่มheight/ ของwidth100%

ตัวอย่างที่นี่
```
iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}
```
```
<iframe></iframe>
```
ขยายตัวอย่างข้อมูล

วิธีที่ 3

สำหรับวิธีการที่ผ่านมานี้เพียงแค่ตั้งค่าheightของbody/ html/ องค์ประกอบiframe100%

ตัวอย่างที่นี่
```
html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}
```
```
<iframe></iframe>
```
ขยายตัวอย่างข้อมูล

— Josh Crozier
แหล่งที่มา

4

ฉันลงเอยด้วยการใช้ตัวเลือกที่ 1 ... ฉันใช้ความกว้าง: 100% และความสูง: 100vh เพราะแหล่งที่ฉันดึงค่อนข้างกว้างและ iframe อยู่ใน div ทางออกที่ดีเยี่ยม ขอบคุณ.

— NotJay

2

การเพิ่มdisplay: blockได้ทำเคล็ดลับในการป้องกันไม่ให้มีแถบเลื่อนคู่

— KavenG

45

1. เปลี่ยน DOCTYPE ของคุณให้เข้มงวดน้อยลง อย่าใช้ XHTML มันโง่ เพียงใช้ประเภท HTML 5 และคุณก็ทำได้ดี:

<!doctype html>

2. คุณอาจต้องตรวจสอบให้แน่ใจ (ขึ้นอยู่กับเบราว์เซอร์) ว่าพาเรนต์ของ iframe มีความสูง และผู้ปกครอง และผู้ปกครอง ฯลฯ :

html, body { height: 100%; }

— Rudie
แหล่งที่มา

9

ส่วนที่สำคัญสำหรับฉันคือแท็ก html และ body ต้องการความสูง: 100% ขอบคุณ

— Spiralis

1

การตั้งค่าใช้งานเพียงตัวถังใน Chrome แต่ไม่ได้อยู่ในเบราว์เซอร์อื่น

— Dingle

นี่ 2 วิธีการทางเลือกเป็น

— Josh Crozier

36

ฉันพบปัญหาเดียวกันฉันดึง iframe เข้าสู่ div ลองสิ่งนี้:

<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

ความสูงถูกตั้งค่าเป็น 100vh ซึ่งหมายถึงความสูงของวิวพอร์ต นอกจากนี้ความกว้างอาจถูกตั้งค่าเป็น 100vw แม้ว่าคุณจะพบปัญหาหากไฟล์ต้นฉบับตอบสนอง (เฟรมของคุณจะกว้างมาก)

— NotJay
แหล่งที่มา

3

ราบรื่นไม่สนับสนุนเบราว์เซอร์ใด ๆ เท่าที่ฉันรู้

— VisualBean

1

หลังจากใช้เวลามากกว่าที่ฉันจะยอมรับว่าไม่ได้กังวลกับปัญหานี้นี่คือสิ่งที่ฉันต้องการ ยกเว้นเว็บไซต์ฉันใช้ไฟล์ HTML อื่นซึ่งต้องการการปรับความสูงวิวพอร์ตเล็กน้อยและตอนนี้ก็ดี ขอบคุณ!

— โทมัสจาคอบส์

29

สิ่งนี้ทำงานได้ดีมากสำหรับฉัน (เฉพาะถ้าเนื้อหา iframe มาจากโดเมนเดียวกัน ):

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>

— อีวาน
แหล่งที่มา

21

วิธีนี้จะใช้งานได้หากiframe srcอยู่ในโดเมนเดียวกับหน้าหลักมิฉะนั้นคุณจะได้รับการปฏิเสธข้อผิดพลาดในการcontentWindow.documentอนุญาต

— wolfyuk

ใช้เวลาเล็กน้อยเพื่อให้การทำงานนี้ภายใน Wordpress ฉันเพิ่งเพิ่มรหัสย่อในปลั๊กอินของฉัน ทำงานเหมือนเสน่ห์

— Andy

มันได้ผล. แต่ปัญหาคือว่ามันจะไม่ถูกคำนวณความสูงในแต่ละหลัง iframe ภายใน มีวิธีแก้ปัญหาหรือไม่?

— Behrouz.M

7

body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}

<iframe></iframe>

ขยายตัวอย่างข้อมูล

— khoa
แหล่งที่มา

6

<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>

— Heitor Giacomini
แหล่งที่มา

4

ทดสอบการทำงานต่อไปนี้

<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>

— Uma Shankar Goel
แหล่งที่มา

1

มีคำตอบอีก 14 ข้อที่นี่แล้ว คุณช่วยอธิบายได้ไหมว่าคำตอบของคุณดีกว่าหรือแตกต่างอย่างน้อย 14 ข้อจากคนอื่น ๆ ?

— สตีเฟ่น Rauch

2

เพิ่มเติมจากคำตอบของ Akshit Soota: มันเป็น importand เพื่อกำหนดความสูงของแต่ละองค์ประกอบหลักอย่างชัดเจนรวมถึงของตารางและคอลัมน์หากมี:

<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">


    <table style="width: 100%; height: 100%" cellspacing="0"  cellpadding="0">
        <tr>
            <td valign="top" align="left" height="100%">
                <iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;" 
                        width="100%" height="100%" frameborder="0" scrolling="no"
                        src="http://www.youraddress.com" ></iframe> 
            </td>

— Brabbeldas
แหล่งที่มา

2

คุณเพิ่ม CSS ครั้งแรก

html,body{
height:100%;
}

นี่จะเป็น html:

 <div style="position:relative;height:100%;max-width:500px;margin:auto">
    <iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
    </iframe>
    </div>

— Tariq Javed
แหล่งที่มา

1

นี่คือรหัสย่อ มันอาศัยวิธี jquery เพื่อค้นหาความสูงของหน้าต่างปัจจุบัน ในการโหลดของ iFrame จะตั้งค่าความสูงของ iframe เหมือนกับหน้าต่างปัจจุบัน จากนั้นเพื่อจัดการกับการปรับขนาดหน้าแท็ก body มีตัวจัดการเหตุการณ์ onresize ซึ่งกำหนดความสูงของ iframe เมื่อใดก็ตามที่เอกสารถูกปรับขนาด

<html>
<head>
    <title>my I frame is as tall as your page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

นี่คือตัวอย่างการทำงาน: http://jsbin.com/soqeq/1/

— BraveNewMath
แหล่งที่มา

0

อีกวิธีในการสร้างแบบเต็มหน้าจอของเหลว`iframe`:

วิดีโอแบบฝังจะเต็ม`viewport`พื้นที่ทั้งหมดเมื่อโหลดหน้าเว็บ

วิธีการที่ดีสำหรับหน้า Landing Page พร้อมวิดีโอหรือเนื้อหาฝังตัวใด ๆ คุณสามารถมีเนื้อหาเพิ่มเติมด้านล่างของวิดีโอแบบฝังซึ่งถูกเปิดเผยเมื่อเลื่อนหน้าลง

ตัวอย่าง:

โค้ด CSS และ HTML

body {
    margin: 0;
    background-color: #E1E1E1;
}
header {
    width: 100%;
    height: 56vw;
    max-height: 100vh;
}
.embwrap {
    width: 100%;
    height: 100%;
    display: table;
}
.embwrap .embcell {
    width: auto;
    background-color: black;
    display: table-cell;
    vertical-align: top;
}
.embwrap .embcell .ifrwrap {
    height: 100%;
    width: 100%;
    display: inline-table;
    background-color: black;
}

.embwrap .embcell .ifrwrap iframe {
    height: 100%;
    width: 100%;
}

<header>
  <div class="embwrap">
    <div class="embcell">
      <div class="ifrwrap">
        <iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1&amp;controls=1&amp;showinfo=1&amp;fs=1"></iframe>
      </div>
    </div>
  </div>
</header>
<article>
  <div style="margin:30px; text-align: justify;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>
    <p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>
  </div>
</article>

ขยายตัวอย่างข้อมูล

— DAH
แหล่งที่มา

โปรดทราบว่าคุณอาจต้องมีจาวาสคริปต์สำหรับ Firefox มีปัญหาทั่วไปเกี่ยวกับ iframe height บน Firefox

— DAH

0

http://embedresponsively.com/

นี่เป็นแหล่งข้อมูลที่ยอดเยี่ยมและทำงานได้ดีมากไม่กี่ครั้งที่ฉันได้ใช้มัน สร้างรหัสต่อไปนี้ ....

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

— ทอม Witherington
แหล่งที่มา

0

สิ่งนี้ใช้ได้สำหรับฉันเท่านั้น (แต่สำหรับ "โดเมนเดียวกัน"):

function MakeIframeFullHeight(iframeElement){
    iframeElement.style.width   = "100%";
    var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
    var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height );  // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
    var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
    if(margins=="") { margins=0;  ifrD.body.style.margin="0px"; }
    (function(){
       var interval = setInterval(function(){
        if(ifrD.readyState  == 'complete' ){
            iframeElement.style.height  = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
            setTimeout( function(){ clearInterval(interval); }, 1000 );
        } 
       },1000)
    })();
}

คุณสามารถใช้:

MakeIframeFullHeight(document.getElementById("iframe_id"));

หรือ

<iframe .... onload="MakeIframeFullHeight(this);" ....

— T.Todua
แหล่งที่มา

0

ตามhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframeค่าเปอร์เซ็นต์จะไม่ได้รับอนุญาตอีกต่อไป แต่สิ่งต่อไปนี้ใช้ได้กับฉัน

<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>

แม้ว่าการwidth:100%ทำงานheight:100%ไม่ได้ผล ดังนั้นจึงwindow.innerHeightมีการใช้ นอกจากนี้คุณยังสามารถใช้พิกเซล css เพื่อความสูง

รหัสการทำงาน: ลิงก์เว็บไซต์ที่ใช้งานได้: ลิงค์

— Agnel Vishal
แหล่งที่มา

0

<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>

— blueDexter
แหล่งที่มา

0

คุณสามารถเรียกใช้ฟังก์ชันที่จะคำนวณเนื้อหาของ iframe เมื่อโหลด iframe:

<script type="text/javascript">
    function iframeloaded(){
       var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
       curHeight = $frame.contents().find('body').height();
       if ( curHeight != lastHeight ) {
           $frame.css('height', (lastHeight = curHeight) + 'px' );
       }
    }
</script>

<iframe onload="iframeloaded()" src=...>

— Tejpal Sharma
แหล่งที่มา

iframe แบบเต็มหน้าจอที่มีความสูง 100%

3 วิธีในการสร้างแบบเต็มหน้าจอiframe:

วิธีที่ 1 - ความยาวเปอร์เซ็นต์การดูวิว

วิธีที่ 2 - แก้ไขตำแหน่ง

วิธีที่ 3

อีกวิธีในการสร้างแบบเต็มหน้าจอของเหลวiframe:

วิดีโอแบบฝังจะเต็มviewportพื้นที่ทั้งหมดเมื่อโหลดหน้าเว็บ

ตัวอย่าง:

3 วิธีในการสร้างแบบเต็มหน้าจอ`iframe`:

อีกวิธีในการสร้างแบบเต็มหน้าจอของเหลว`iframe`:

วิดีโอแบบฝังจะเต็ม`viewport`พื้นที่ทั้งหมดเมื่อโหลดหน้าเว็บ