ทำให้ Iframe ให้พอดีกับความสูงที่เหลืออยู่ของคอนเทนเนอร์ 100%

260

ฉันต้องการออกแบบเว็บเพจที่มีแบนเนอร์และ iframe ฉันหวังว่า iframe สามารถเติมเต็มความสูงของหน้าที่เหลือทั้งหมดและปรับขนาดโดยอัตโนมัติเมื่อเบราว์เซอร์กำลังปรับขนาด เป็นไปได้ไหมที่จะทำได้โดยไม่ต้องเขียนโค้ด Javascript ด้วย CSS เท่านั้น?

ฉันลองตั้งค่าheight:100%iframe ผลลัพธ์ค่อนข้างใกล้ แต่ iframe พยายามเติมเต็มความสูงของหน้ารวมถึง30pxความสูงขององค์ประกอบ div banner ดังนั้นฉันจึงมี scrollbar แนวตั้งที่ไม่จำเป็น มันไม่สมบูรณ์แบบ

หมายเหตุการอัปเดต : ขอโทษด้วยที่ฉันไม่อธิบายคำถามฉันลองใช้ CSS margin, padding attribute บน DIV เพื่อครอบครองส่วนที่เหลือทั้งหมดของหน้าเว็บให้ประสบความสำเร็จ แต่เคล็ดลับใช้ไม่ได้กับ iframe

 <body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe>
</body>
ขยายตัวอย่างข้อมูล

ความคิดใด ๆ ที่ชื่นชม

html  css  iframe 
— Darkthread
แหล่งที่มา

คำตอบ:

236

อัพเดทในปี 2562

TL; DR:วันนี้ตัวเลือกที่ดีที่สุดคือตัวเลือกสุดท้ายในคำตอบนี้ - flexbox ทุกอย่างรองรับอย่างดีและมีมานานหลายปี ไปเพื่อสิ่งนั้นและอย่ามองย้อนกลับไป ส่วนที่เหลือของคำตอบนี้ถูกทิ้งไว้ด้วยเหตุผลทางประวัติศาสตร์

เคล็ดลับคือการเข้าใจสิ่งที่นำมา 100% การอ่านรายละเอียด CSS สามารถช่วยคุณได้

เพื่อทำให้เรื่องสั้นสั้น - มีสิ่งต่าง ๆ เช่น "บรรจุบล็อก" - ซึ่งไม่จำเป็นต้องมีองค์ประกอบหลัก พูดง่ายๆก็คือองค์ประกอบแรกขึ้นลำดับชั้นที่มีตำแหน่ง: ญาติหรือตำแหน่ง: แน่นอน หรือองค์ประกอบของร่างกายตัวเองหากไม่มีอะไรอื่น ดังนั้นเมื่อคุณพูดว่า "width: 100%" มันจะตรวจสอบความกว้างของ "บล็อกที่มี" และตั้งค่าความกว้างขององค์ประกอบของคุณเป็นขนาดเดียวกัน หากมีอย่างอื่นที่นั่นคุณอาจได้รับเนื้อหาของ "บล็อกที่มี" ที่มีขนาดใหญ่กว่าตัวมันเอง (เช่น "ล้น")

ความสูงทำงานในลักษณะเดียวกัน ด้วยข้อยกเว้นหนึ่งข้อ คุณไม่สามารถเพิ่มความสูงได้ถึง 100% ของหน้าต่างเบราว์เซอร์ องค์ประกอบระดับบนสุดที่สามารถคำนวณได้ 100% เป็นองค์ประกอบของร่างกาย (หรือ html หรือไม่ไม่แน่ใจ) และมีความยาวพอที่จะมีเนื้อหา การระบุความสูง: 100% จะไม่มีผลกระทบเนื่องจากไม่มี "องค์ประกอบหลัก" ที่ใช้วัด 100% หน้าต่างจะไม่นับ ;)

ในการสร้างบางสิ่งบางอย่างที่ยืดออก 100% ของหน้าต่างคุณมีสองทางเลือก:

  1. ใช้จาวาสคริปต์
  2. อย่าใช้ DOCTYPE นี่ไม่ใช่วิธีปฏิบัติที่ดี แต่วางเบราว์เซอร์ใน "โหมด quirks" ซึ่งคุณสามารถทำ height = "100%" ในองค์ประกอบและมันจะยืดพวกเขาให้มีขนาดหน้าต่าง โปรดทราบว่าส่วนที่เหลือของหน้าของคุณอาจจะมีการเปลี่ยนแปลงด้วยเพื่อรองรับการเปลี่ยนแปลง DOCTYPE

อัปเดต:ฉันไม่แน่ใจว่าฉันไม่ผิดเมื่อโพสต์สิ่งนี้ แต่ตอนนี้ล้าสมัยอย่างแน่นอน วันนี้คุณสามารถทำได้ในสไตล์ชีทของคุณ: html, body { height: 100% }และมันจะขยายไปถึงวิวพอร์ตทั้งหมดของคุณ แม้แต่กับ DOCTYPE min-height: 100%อาจมีประโยชน์ขึ้นอยู่กับสถานการณ์ของคุณ

และฉันจะไม่แนะนำให้ใครทำเอกสารโหมด quirksอีกต่อไปเพราะมันทำให้ปวดหัวมากกว่าแก้พวกเขา เบราว์เซอร์ทุกตัวมีโหมดนิสัยใจคอที่แตกต่างกันดังนั้นการทำให้หน้าเว็บของคุณดูอย่างสม่ำเสมอบนเบราว์เซอร์จะกลายเป็นคำสั่งสองขนาดที่ยากกว่า ใช้ DOCTYPE เสมอ. โดยเฉพาะอย่าง HTML5 หนึ่ง <!DOCTYPE html>- ง่ายต่อการจดจำและใช้งานได้อย่างมีเสน่ห์ในเบราว์เซอร์ทุกประเภทแม้กระทั่งอายุ 10 ปี

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

โชคดี!

อัปเดต 2:เฮ้มันใช้เวลานานแล้ว! 6 ปีต่อมามีตัวเลือกใหม่เกิดขึ้น ฉันเพิ่งมีการสนทนาในความคิดเห็นด้านล่างนี่คือเทคนิคเพิ่มเติมสำหรับคุณที่ทำงานในเบราว์เซอร์วันนี้

ตัวเลือกที่ 1 - การกำหนดตำแหน่งที่แน่นอน ดีและสะอาดเมื่อคุณทราบความสูงที่แม่นยำของส่วนแรก

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}
.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
<div class="first-row">
  <p>Some text</p>
  <p>And some more text</p>
</div>
<div class="second-row">
  <iframe src="https://jsfiddle.net/about"></iframe>
</div>
ขยายตัวอย่างข้อมูล

บางบันทึกย่อ - second-rowจำเป็นต้องมีคอนเทนเนอร์เนื่องจากbottom: 0และright: 0ไม่สามารถใช้งาน iframe ได้ด้วยเหตุผลบางประการ สิ่งที่ต้องทำในการเป็นองค์ประกอบ "แทนที่" แต่width: 100%และใช้height: 100%งานได้ดี display: blockเป็นสิ่งจำเป็นเนื่องจากเป็นinlineองค์ประกอบตามค่าเริ่มต้นและช่องว่างเริ่มต้นสร้างล้นอย่างอื่นแปลก ๆ

ตัวเลือก 2 - ตาราง ทำงานเมื่อคุณไม่ทราบความสูงของส่วนแรก คุณสามารถใช้อย่างใดอย่างหนึ่งที่เกิดขึ้นจริงแท็กหรือทำวิธีแฟนซีด้วย<table> display: tableฉันจะไปที่หลังเพราะดูเหมือนว่าจะเป็นแฟชั่นในวันนี้

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;}
.first-row {display: table-row; overflow: auto; background-color: lime;}
.second-row {display: table-row; height: 100%; background-color: red; overflow: hidden }
.second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;}
<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <div class="second-row">
    <iframe src="https://jsfiddle.net/about"></iframe>
  </div>
</div>
ขยายตัวอย่างข้อมูล

บางบันทึกย่อ - overflow: autoตรวจสอบให้แน่ใจว่าแถวนั้นมีเนื้อหาทั้งหมดอยู่เสมอ มิฉะนั้นองค์ประกอบลอยตัวบางครั้งสามารถล้น height: 100%ในแถวที่สองทำให้แน่ใจว่ามันขยายมากที่สุดเท่าที่จะสามารถบีบแถวแรกที่มีขนาดเล็กที่จะได้รับ

ตัวเลือก 3 - flexbox หนึ่งที่สะอาดที่สุดของพวกเขาทั้งหมด แต่ด้วยการสนับสนุนเบราว์เซอร์น้อยกว่าดาวฤกษ์ IE10 จะต้องมี-ms-คำนำหน้าสำหรับคุณสมบัติ flexbox และอะไรที่น้อยกว่าจะไม่รองรับเลย

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>
ขยายตัวอย่างข้อมูล

หมายเหตุบางประการ - overflow: hiddenเป็นเพราะ iframe ยังคงสร้างโอเวอร์โฟลว์แม้display: blockในกรณีนี้ ไม่สามารถมองเห็นได้ในมุมมองเต็มหน้าจอหรือตัวแก้ไขโค้ด แต่หน้าต่างแสดงตัวอย่างขนาดเล็กจะได้รับแถบเลื่อนพิเศษ ไม่รู้เลยว่าคืออะไร iframes แปลก

— Vilx-
แหล่งที่มา
@sproketboy เอาละมันเป็นคำแนะนำของ W3C และมันก็ไม่ใช่สิ่งที่เลวร้ายที่สุดไม่ใช่โดยทางยาว
— John
ดังนั้นเราจะวางสิ่งนี้ไว้ในสไตล์ชีทของหน้า IFrame หรือสไตล์ชีทของเพจพาเรนต์ที่มี IFrame อยู่หรือไม่?
— Mathias Lykkegaard Lorenzen
1
มันยอดเยี่ยมมากขอบคุณ! flexbox ที่สะอาดที่สุดแน่นอน แต่ตารางก็ยอดเยี่ยมในการเรียนรู้และดูเหมือนว่าจะทำงานได้โดยไม่ต้องล้น: jsfiddle.net/dmitri14/1uqh3zgx/2
— Dmitri Zaitsev
1
อาจเป็นการย้ายการอัปเดตล่าสุดไปที่ด้านบนสุดของคำตอบนี้ ฉันต้องผ่านทุกสิ่งเพื่อที่จะได้คำตอบที่ดีที่สุด flexbox
— Forgivenson
2
@forgivenson - จริงเพียงพอ เพิ่มบันทึกเมื่อเริ่มคำตอบนี้
— Vilx-
68

เราใช้ JavaScript เพื่อแก้ปัญหานี้ นี่คือแหล่งที่มา

var buffer = 20; //scroll bar buffer
var iframe = document.getElementById('ifm');

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}

function resizeIframe() {
    var height = document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}

// .onload doesn't work with IE8 and older.
if (iframe.attachEvent) {
    iframe.attachEvent("onload", resizeIframe);
} else {
    iframe.onload=resizeIframe;
}

window.onresize = resizeIframe;

หมายเหตุ: ifmคือ iframe ID

pageY() ถูกสร้างโดย John Resig (ผู้เขียน jQuery)

— MichAdel
แหล่งที่มา
49

อีกวิธีในการทำเช่นนั้นคือใช้position: fixed;โหนดบนพาเรนต์
ถ้าฉันไม่เข้าใจผิดให้position: fixed;โยงองค์ประกอบเข้ากับวิวพอร์ตดังนั้นเมื่อคุณให้โหนดwidth: 100%;และheight: 100%;คุณสมบัตินี้แล้วมันจะขยายไปทั่วทั้งหน้าจอ จากจุดนี้ไปคุณสามารถวาง<iframe>แท็กไว้ด้านในและขยายไปยังพื้นที่ที่เหลือ (ทั้งความกว้างและความสูง) ด้วยwidth: 100%; height: 100%;คำสั่ง CSS อย่างง่าย

รหัสตัวอย่าง

    body {
        margin: 0px;
        padding: 0px;
    }

    /* iframe's parent node */
    div#root {
        position: fixed;
        width: 100%;
        height: 100%;
    }

    /* iframe itself */
    div#root > iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
    }
   <html>
        <head>
            <title>iframe Test</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        </head>
        <body>
            <div id="root">
                <iframe src="http://stackoverflow.com/">
                    Your browser does not support inline frames.
                </iframe>
            </div>
        </body>
    </html>
ขยายตัวอย่างข้อมูล

— D1SoveR
แหล่งที่มา
1
สิ่งนี้ทำให้ความสูง "เหลือ" ได้อย่างไร .. ?
— EricG
3
ฉันสังเกตเห็นว่าคุณต้องเพิ่มposition: fixedใน iframe ด้วย
— 0xF
ขอขอบคุณแก้ไขความสูงของรายงาน SSRS ของฉันหลีกเลี่ยงการฆ่าตัวตายในอีกวันหนึ่ง
— Mike D
1
ไม่มีการเลื่อนมองเห็น
— andrej
สมบูรณ์แบบ - คุณช่วยอธิบาย css '>' เช่น div # root> iframe เพิ่มเติมได้อย่างไรฉันไม่คุ้นเคยกับมันและไม่สามารถหาข้อมูลอ้างอิงได้
— Datadimension
40

นี่คือวิธีการที่ทันสมัยไม่กี่:

  • วิธีที่ 1 - การรวมกันของหน่วยญาติวิวพอร์ตcalc() /

    นิพจน์แสดงcalc(100vh - 30px)ถึงความสูงที่เหลืออยู่ 100vhความสูงของเบราว์เซอร์อยู่ที่ไหนและการใช้calc()อย่างมีประสิทธิภาพแทนที่ความสูงขององค์ประกอบอื่น ๆ

    ตัวอย่างที่นี่

    body {
    margin: 0;
}
.banner {
    background: #f00;
    height: 30px;
}
iframe {
    display: block;
    background: #000;
    border: none;
    height: calc(100vh - 30px);
    width: 100%;
}
    <div class="banner"></div>
<iframe></iframe>
    ขยายตัวอย่างข้อมูล

    สนับสนุนcalc()ที่นี่ ; การสนับสนุนสำหรับหน่วยญาติวิวพอร์ตที่นี่

  • วิธีที่ 2 - วิธีใช้ Flexbox

    ตัวอย่างที่นี่

    ตั้งค่าdisplayขององค์ประกอบหลักทั่วไปไปflexพร้อมกับflex-direction: column(สมมติว่าคุณต้องการองค์ประกอบที่จะสแต็คที่ด้านบนของกันและกัน) จากนั้นตั้งค่าflex-grow: 1บนiframeองค์ประกอบลูกเพื่อให้มันเติมเต็มพื้นที่ที่เหลืออยู่

    body {
    margin: 0;
}
.parent {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.parent .banner {
    background: #f00;
    width: 100%;
    height: 30px;
}
.parent iframe {
    background: #000;
    border: none;
    flex-grow: 1;
}
    <div class="parent">
    <div class="banner"></div>
    <iframe></iframe>
</div>
    ขยายตัวอย่างข้อมูล

    เนื่องจากวิธีนี้มีการสนับสนุนน้อยกว่า1ฉันขอแนะนำให้ใช้วิธีดังกล่าวข้างต้น

1 แม้ว่าดูเหมือนว่าจะทำงานใน Chrome / FF แต่ก็ไม่ได้ทำงานใน IE (วิธีแรกใช้ได้กับเบราว์เซอร์ปัจจุบันทั้งหมด)

— Josh Crozier
แหล่งที่มา
3
ทั้งงานและ IMO ตัวเลือกทั้งสองที่กล่าวถึงที่นี่เป็นวิธีที่ดีที่สุด ฉันชอบflexboxตัวเลือกเพราะคุณจำเป็นต้องรู้จำนวนของพื้นที่ที่จะหักจากcalc vhด้วยflexboxวิธีง่าย ๆflex-grow:1ไม่น้อยเลย
— Kilmazing
39

คุณสามารถทำมันได้ด้วยแต่คุณต้องใช้DOCTYPE tableลองดู:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}

.header {border-bottom:1px solid #000}
.content {height:100%}
</style>
</head>
<body>
<table>
    <tr><td class="header"><div><h1>Header</h1></div></td></tr>
    <tr><td class="content">
        <iframe src="http://google.com/" frameborder="0"></iframe></td></tr>
</table>
</body>
</html>
— Ducu
แหล่งที่มา
1
อย่างน้อยก็ไม่ต้องการ js !! แต่มันปลอดภัยบนเว็บหรือไม่
— Ali Shakiba
1
ข้อเสียของโซลูชันนี้คือ html, body {overflow: hidden;} จะลบการเลื่อนหน้า
— Ali Shakiba
ฉันกำลังพยายามเพิ่มส่วนท้ายในโค้ดด้านบน แต่ส่วนท้ายไม่แสดง คุณช่วยได้ไหม
— Akshay Raut
18

บางทีนี่อาจได้รับคำตอบแล้ว (คำตอบสองสามข้อข้างต้นเป็นวิธีที่ "ถูกต้อง" ในการทำเช่นนี้) แต่ฉันคิดว่าฉันแค่เพิ่มวิธีแก้ปัญหาของฉันด้วย

iFrame ของเราโหลดภายใน div ดังนั้นฉันต้องการอะไรอย่างอื่นแล้ว window.height และเมื่อเห็นว่าโครงการของเราพึ่งพา jQuery ไปแล้วฉันพบว่านี่เป็นทางออกที่ดีที่สุด:

$("iframe").height($("#middle").height());

โดยที่ "#middle" เป็นรหัสของ div สิ่งเดียวที่คุณต้องทำคือเรียกคืนการเปลี่ยนแปลงขนาดนี้เมื่อใดก็ตามที่ผู้ใช้ปรับขนาดหน้าต่าง

$(window).resize(function() {
    $("iframe").height($("#middle").height());
});
— Tim Geerts
แหล่งที่มา
7

นี่คือสิ่งที่ฉันทำ ฉันมีปัญหาเดียวกันและลงเอยด้วยการค้นหาเว็บเพื่อหาแหล่งข้อมูลเป็นเวลาหลายชั่วโมง

<style type="text/css">
   html, body, div, iframe { margin:0; padding:0; height:100%; }
   iframe { position:fixed; display:block; width:100%; border:none; }
</style>

ฉันเพิ่มส่วนนี้ไว้ในส่วนหัว

โปรดทราบว่า iframe ของฉันตั้งอยู่ภายในเซลล์ตรงกลางของตารางที่มี 3 แถวและ 1 คอลัมน์

— Danut Milea
แหล่งที่มา
รหัสของคุณจะใช้งานได้กับ TD ที่มี IFRAME เท่านั้นที่มีความสูง: 100% มันจะทำงานถ้าตารางอยู่ในองค์ประกอบ DIV เพราะคุณมีสไตล์สำหรับ div ทั้งหมดที่มีความสูง: 100%
— Nikola Petkanski
6

รหัส MichAdel ใช้งานได้สำหรับฉัน แต่ฉันทำการแก้ไขเล็กน้อยเพื่อให้มันทำงานได้อย่างถูกต้อง

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
var buffer = 10; //scroll bar buffer
function resizeIframe() {
    var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}
window.onresize = resizeIframe;
window.onload = resizeIframe;
— asimrafi
แหล่งที่มา
4

ถูกต้องคุณกำลังแสดง iframe ที่มีความสูง 100% สำหรับคอนเทนเนอร์: ร่างกาย

ลองสิ่งนี้:

<body>
  <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
  <div style="width:100%; height:90%; background-color:transparent;">
    <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;">
    </iframe> 
  </div>
</body>

แน่นอนเปลี่ยนความสูงของ div ที่สองเป็นความสูงที่คุณต้องการ

— ARemesal
แหล่งที่มา
8
30px + 90%! = 100%
— ขั้นตอน
1
สามารถใช้ Calc (100% - 30px) แทน 90%
— Justin E
4

ลองต่อไปนี้:

<iframe name="" src="" width="100%" style="height: 100em"/>

มันใช้งานได้สำหรับฉัน

— sree
แหล่งที่มา
4
ไม่เติมผู้ปกครองเพียงวางความสูงขนาดใหญ่บน iframe
— Ben
3

คุณสามารถทำได้ด้วย html / css ดังนี้:

<body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="position:fixed;top:30px;bottom:0px;width:100%;"></iframe>
</body>
— vdbuilder
แหล่งที่มา
2

ใหม่ใน HTML5: ใช้การคำนวณ (ตามความสูง)

<html style="width:100%; height:100%; margin: 0px; padding: 0px;">
<body style="width:100%; height:100%; margin: 0px; padding: 0px;">
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src="http://www.google.com.tw" style="width:100%; height: calc(100% - 30px);"></iframe>
</body>
</html>
— Stefan Steiger
แหล่งที่มา
2

ฉันใช้ display: table เพื่อแก้ไขปัญหาที่คล้ายกัน มันเกือบจะทำงานนี้ออกจากแถบเลื่อนแนวตั้งขนาดเล็ก หากคุณกำลังพยายามเติมคอลัมน์ที่มีความยืดหยุ่นด้วยอย่างอื่นที่ไม่ใช่ iframe ระบบจะใช้งานได้ดี (ไม่ใช่

ใช้ HTML ต่อไปนี้

<body>
  <div class="outer">
    <div class="banner">Banner</div>
    <div class="iframe-container">
      <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;border:0;"></iframe>
    </div>
  </div>
</body>

เปลี่ยน div ด้านนอกเพื่อใช้ display: table และตรวจสอบให้แน่ใจว่ามีการตั้งค่าความกว้างและความสูง

.outer {
  display: table;
  height: 100%;
  width: 100%;
}

ทำให้แบนเนอร์เป็นตารางแถวและตั้งค่าความสูงเป็นสิ่งที่คุณต้องการ:

.banner {
  display: table-row;
  height: 30px;
  background: #eee;
}

เพิ่ม div พิเศษรอบ iframe ของคุณ (หรือเนื้อหาใด ๆ ที่คุณต้องการ) และทำให้เป็นตารางแถวที่มีความสูงตั้งไว้ที่ 100% (การตั้งค่าความสูงเป็นสิ่งสำคัญหากคุณต้องการฝัง iframe เพื่อเติมเต็มความสูง)

.iframe-container {
  display: table-row;
  height: 100%;
}

ด้านล่างเป็น jsfiddle แสดงที่ทำงาน (ไม่มี iframe เพราะดูเหมือนจะไม่ทำงานในซอ)

https://jsfiddle.net/yufceynk/1/

— daamsie
แหล่งที่มา
1

ฉันคิดว่าคุณมีปัญหาด้านความคิดที่นี่ หากต้องการพูดว่า"ฉันพยายามตั้งความสูง: 100% ใน iframe ผลลัพธ์ค่อนข้างใกล้เคียง แต่ iframe พยายามเติมเต็มหน้าทั้งหมด"ดีเมื่อใดที่ "100%" ไม่เท่ากับ "ทั้ง"?

คุณได้ขอให้ iframe เติมเต็มความสูงทั้งหมดของคอนเทนเนอร์ (ซึ่งเป็นตัวถัง) แต่น่าเสียดายที่มันมีระดับบล็อกของพี่น้องใน <div> ด้านบนที่คุณขอให้มีขนาดใหญ่ 30px ดังนั้นผลรวมคอนเทนเนอร์หลักจะถูกขอให้ปรับขนาดเป็น 100% + 30px> 100%! ดังนั้นแถบเลื่อน

สิ่งที่ฉันคิดว่าคุณหมายถึงคือคุณต้องการให้ iframe บริโภคสิ่งที่เหลือเช่นเฟรมและเซลล์ตารางได้เช่น height = "*" IIRC สิ่งนี้ไม่มีอยู่

น่าเสียดายที่ความรู้ที่ดีที่สุดของฉันไม่มีทางที่จะผสมผสาน / คำนวณ / ลบสัมบูรณ์และหน่วยสัมพัทธ์ได้อย่างมีประสิทธิภาพดังนั้นฉันคิดว่าคุณลดเหลือสองตัวเลือก:

  1. วางตำแหน่ง div ของคุณอย่างแน่นอนซึ่งจะนำมันออกจากภาชนะเพื่อให้ iframe เพียงอย่างเดียวจะใช้ความสูงของภาชนะบรรจุ สิ่งนี้ทำให้คุณมีปัญหาอื่น ๆ ทั้งหมด แต่บางทีสำหรับสิ่งที่คุณทำทึบหรือการจัดตำแหน่งจะ ok

  2. หรือคุณต้องระบุ% height สำหรับ div และลดความสูงของ iframe ลงมาก หากความสูงสัมบูรณ์นั้นสำคัญจริง ๆ คุณจะต้องนำสิ่งนั้นไปใช้กับองค์ประกอบย่อยของ div แทน

— annakata
แหล่งที่มา
1

หลังจากลองใช้เส้นทาง css มาพักหนึ่งแล้วฉันก็เขียนสิ่งที่ค่อนข้างพื้นฐานใน jQuery ที่ทำงานให้ฉัน:

function iframeHeight() {
    var newHeight = $j(window).height();
    var buffer = 180;     // space required for any other elements on the page 
    var newIframeHeight = newHeight - buffer;
    $j('iframe').css('height',newIframeHeight);    //this will aply to all iframes on the page, so you may want to make your jquery selector more specific.
}

// When DOM ready
$(function() {
    window.onresize = iframeHeight;
}

ทดสอบใน IE8, Chrome, Firefox 3.6

— benb
แหล่งที่มา
1

คำตอบที่คล้ายกันของ @MichAdel แต่ฉันใช้ JQuery และดูสง่างามกว่า

<script type="text/javascript">
    $(document).ready(function() {
        var $iframe = $('#iframe_id')[0];

        // Calculate the total offset top of given jquery element
        function totalOffsetTop($elem) {
            return $elem.offsetTop + ($elem.offsetParent ? totalOffsetTop($elem.offsetParent) : 0);
        }

        function resizeIframe() {
            var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
            height -= totalOffsetTop($iframe);
            $iframe.height = Math.max(0, height) + 'px';
        }

        $iframe.onload = resizeIframe();
        window.onresize = resizeIframe;
    });
</script>

iframe_id คือ ID ของแท็ก iframe

— Roy Shmuli
แหล่งที่มา
0

คุณสามารถทำได้โดยการวัดขนาดร่างกายในการโหลด / ปรับขนาดเหตุการณ์และตั้งค่าความสูงเป็น (เต็มความสูง - ความสูงแบนเนอร์)

โปรดทราบว่าขณะนี้อยู่ใน IE8 Beta2 คุณไม่สามารถดำเนินการนี้ได้เนื่องจากมีเหตุการณ์ดังกล่าวเกิดขึ้นใน IE8 Beta2

— scunliffe
แหล่งที่มา
0

หรือคุณสามารถไปโรงเรียนเก่าและใช้framesetบางที:

<frameset rows="30,*">
  <frame src="banner.swf"/>
  <frame src="inner.html" />
</frameset>
— อาเมียร์อาราด
แหล่งที่มา
2
@vdbuilder: ไม่มันเป็นเพียงpre-html5 ที่ถูกต้องเท่านั้น ฉันพนันได้เลยว่ามันยังใช้งานได้ ;-)
— TJ Crowder
0

ในขณะที่ฉันเห็นว่า JS ดูเหมือนจะเป็นตัวเลือกที่ดีกว่าฉันมี CSS ที่ใช้งานได้ดี ข้อเสียของมันคือถ้าคุณต้องเพิ่มเนื้อหาลงในเอกสาร html iframe ของคุณบ่อยๆคุณจะต้องปรับเวลาร้อยละหนึ่ง

สารละลาย:

พยายามอย่าระบุความสูงสำหรับเอกสาร html ของคุณ

html, body, section, main-div {}

จากนั้นรหัสเท่านั้นนี้:

#main-div {height:100%;}
#iframe {height:300%;}

หมายเหตุ: div ควรเป็นหัวข้อหลักของคุณ

มันควรจะทำงานได้ดี iframe จะคำนวณความสูงของหน้าต่างที่มองเห็นได้ 300% หากคุณเนื้อหา HTML จากเอกสารที่ 2 (ใน iframe) มีความสูงน้อยกว่า 3 เท่าของความสูงของเบราว์เซอร์ หากคุณไม่ต้องการเพิ่มเนื้อหาลงในเอกสารบ่อยๆนี่เป็นวิธีแก้ไขปัญหาอย่างถาวรและคุณสามารถค้นหา% ที่คุณต้องการได้ตามความสูงของเนื้อหา

ใช้งานได้เนื่องจากป้องกันเอกสาร html ที่ 2 (เอกสารที่ฝัง) เพื่อรับความสูงจากเอกสาร html หลัก มันป้องกันเพราะเราไม่ได้ระบุความสูงสำหรับทั้งคู่ เมื่อเราให้% แก่เด็กมันจะมองหาพาเรนต์ถ้าไม่ใช่มันต้องใช้ความสูงของเนื้อหา และถ้าหากภาชนะอื่นไม่ได้รับความสูงจากสิ่งที่ฉันลอง

— pixelfe
แหล่งที่มา
0

"การที่ไร้รอยต่อแอตทริบิวต์" เป็นมาตรฐานใหม่ที่มีเป้าหมายที่จะแก้ปัญหานี้:

http://www.w3schools.com/tags/att_iframe_seamless.asp

เมื่อกำหนดคุณสมบัตินี้มันจะลบเส้นขอบและแถบเลื่อนและปรับขนาด iframe ให้เป็นขนาดเนื้อหา แม้ว่าจะรองรับเฉพาะใน Chrome และ Safari ล่าสุด

เพิ่มเติมเกี่ยวกับเรื่องนี้ที่นี่: HTML5 iFrame Seamless Attribute

— user2254487
แหล่งที่มา
แอตทริบิวต์ Seamless ถูกลบออกจากข้อกำหนด HTML 5
— Eric Steinborn
0

วิธีการแก้ปัญหา jQuery ง่าย ๆ

ใช้สิ่งนี้ในสคริปต์ในหน้า iframed

$(function(){

    if(window != top){
        var autoIframeHeight = function(){
            var url = location.href;
            $(top.jQuery.find('iframe[src="'+ url +'"]')).css('height', $('body').height()+4);
        }
        $(window).on('resize',autoIframeHeight);
        autoIframeHeight();
    }

}
— UnLoCo
แหล่งที่มา
0

คุณไม่สามารถตั้งค่าความสูงของ iframe เป็น% ได้เนื่องจากความสูงของเนื้อหาหลักของคุณไม่ใช่ 100% ดังนั้นทำให้ความสูงหลักเป็น 100% จากนั้นใช้ความสูงของ iframe 100%

For eg.
<html>
<head>
<style>
html,body{height:100%}
</style> 
</head>
<body>
<iframe src="http://www.quasarinfosystem.com" height="100%" width="100%" ></iframe>
</body>
</html>
— Pravin Abhale
แหล่งที่มา
0

หากคุณมีสิทธิ์เข้าถึงเนื้อหาของ iframe ที่จะโหลดคุณสามารถบอกผู้ปกครองให้ปรับขนาดเมื่อใดก็ตามที่มีการปรับขนาด ..

    $(window).resize(function() {
        $(parent.document)
            .find("iframe")
            .css("height", $("body").css("height"));        
    }).trigger("resize");

หากคุณมี iframe มากกว่าหนึ่งรายการบนหน้าเว็บคุณอาจต้องใช้วิธีการ id หรือวิธีที่ชาญฉลาดเพื่อปรับปรุง. find ("iframe") เพื่อให้คุณเลือกรายการที่ถูกต้อง

— สตีเฟ่น
แหล่งที่มา
0

ฉันคิดว่าวิธีที่ดีที่สุดในการบรรลุสถานการณ์นี้โดยใช้ตำแหน่ง css กำหนดตำแหน่งที่สัมพันธ์กับ div หลักและตำแหน่งของคุณ: สัมบูรณ์กับ iframe ของคุณ

.container{
  width:100%;
  position:relative;
  height:500px;
}

iframe{
  position:absolute;
  width:100%;
  height:100%;
}
<div class="container">
  <iframe src="http://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
 </iframe>
</div>
ขยายตัวอย่างข้อมูล

สำหรับช่องว่างภายในและช่องว่างอื่น ๆ ในตอนนี้ css3 calc () เป็นขั้นสูงและเข้ากันได้กับเบราว์เซอร์ทั้งหมดเป็นส่วนใหญ่

ตรวจสอบcalc ()

— เจย์เทล
แหล่งที่มา
0

ทำไมไม่ทำเช่นนี้ (มีการปรับเล็กน้อยสำหรับช่องว่างภายในร่างกาย / ระยะขอบ)

<script>
  var oF = document.getElementById("iframe1");
  oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>
— access_granted
แหล่งที่มา
คุณต้องแทนที่-0ด้วย+'px'ในตอนท้าย ใช้งานกับมือถือได้หรือไม่
— Dmitri Zaitsev
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.