100% की ऊंचाई के साथ पूर्ण स्क्रीन iframe

238

क्या सभी ब्राउज़रों में iframe height = 100% समर्थित है?

मैं सिद्धांत का उपयोग कर रहा हूं:

<!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", मैं फ़ायरफ़ॉक्स में अक्षम स्क्रॉलबार देख सकता हूं ... मैं स्क्रॉलबार को पूरी तरह से कैसे छिपा सकता हूं और स्वचालित रूप से iframe ऊंचाई सेट कर सकता हूं?

javascript  html  css  iframe  html-frames 
— testndtv
स्रोत
14
वास्तव में देखें कि मेरे पास सभी ब्राउज़र स्थापित नहीं
— हैं..अलग-
1
आप इसे एक सीएसएस सत्यापनकर्ता में भी आज़मा सकते हैं।
— रूबेन
6
हां, यह कोई त्रुटि / चेतावनी नहीं देता है ... लेकिन मेरा सवाल यह है कि क्या सभी ब्राउज़र वास्तव में 100% ऊंचाई पर लागू होते हैं?
— testndtv
मेरे लिए इस जवाब ने ठीक काम किया: stackoverflow.com/questions/5272519/…
— Zied Hamdi

जवाबों:

276

आप पिछली उत्तर स्थिति के रूप में फ्रेमसेट का उपयोग कर सकते हैं लेकिन यदि आप आईफ़्रेश का उपयोग करने पर जोर देते हैं, तो 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 के स्क्रॉलबार को छुपाता है!

— कुल्हाड़ी
स्रोत
3
अच्छा लगता है..जब एक सवाल है ... हमें शैली का उपयोग करने की आवश्यकता क्यों है = "ऊंचाई: 100%; चौड़ाई: 100%"; जब हम किसी भी तरह से iframe ऊंचाई = "100%" चौड़ाई = "100%" कह रहे हों
— testndtv
1
इसके अलावा केवल IE 100% ऊंचाई नहीं ले रहा है (लगभग 200px ht लेता है) ... FF और Safri सभी शेष ऊंचाई लेते हैं ..
— testndtv
@ बोरिस ज़बर्स्की हाँ, मुझे यह बताने के लिए धन्यवाद! मैंने अभी पोस्ट अपडेट की है !! @hmthr डबल टैग से संबंधित आपका पहला प्रश्न है क्योंकि पहले के ब्राउज़र "ऊँचाई" और "चौड़ाई" टैग लेते हैं लेकिन स्टाइल टैग के साथ अच्छी तरह से काम नहीं करते हैं! IE बग के बारे में, मैं आपको उस मामले के लिए पहले कोड के साथ रहना पसंद करूंगा।
— Ax
15
100% का ठीक से उपयोग करने के लिए iframe प्राप्त करने के लिए माता-पिता को 100% होना चाहिए। नए सिद्धांतों में html और बॉडी टैग स्वचालित रूप से 100% नहीं हैं। जब मैंने ऊँचाई जोड़ ली: html और शरीर के लिए 100% तो यह निर्दोष रूप से काम किया। तो, सवाल का सही जवाब, मुझे लगता है, रूडी से जवाब है, इसके अलावा मुझे अपना एक्सएचटीएमएल सिद्धांत रखना था। इसके अलावा, ध्यान दें कि अतिप्रवाह नियम तब आवश्यक नहीं हैं। स्क्रॉलबार तब इच्छानुसार काम करता है - स्वचालित रूप से।
— सर्पिलिस
3
यह SO उत्तर भी बहुत छोटा और अच्छा है।
— उवे कीम
164

फुलस्क्रीन बनाने के लिए 3 दृष्टिकोण iframe:

  • दृष्टिकोण 2 - निश्चित स्थिति

    यह दृष्टिकोण काफी सीधा-आगे है। बस की स्थिति सेट fixedतत्व और एक जोड़ने height/ widthके 100%।

    यहाँ उदाहरण है

    iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}
    <iframe></iframe>
    स्निपेट का विस्तार करें

  • दृष्टिकोण ३

    यह पिछले विधि के लिए, बस सेट heightके body/ html/ iframeतत्वों के लिए 100%।

    यहाँ उदाहरण है

    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>
    स्निपेट का विस्तार करें

— जोश क्रोज़ियर
स्रोत
4
मैंने विकल्प 1 की विविधता का उपयोग करके समाप्त कर दिया ... मैंने चौड़ाई का उपयोग किया: 100% और ऊंचाई: 100vh क्योंकि मैं जिस स्रोत को खींच रहा था वह बहुत चौड़ा था और iframe एक div में निहित है। उत्कृष्ट समाधान। धन्यवाद।
— नॉटजाय जूल 30'15
2
जोड़ने display: blockसे चाल डबल-स्क्रॉलबार को रोकने के लिए किया गया
— कावेंग
45

1. अपने DOCTYPE को कुछ कम सख्त में बदलें। XHTML का उपयोग न करें; यह मूर्खता है। बस HTML 5 सिद्धांत का उपयोग करें और आप अच्छे हैं:

<!doctype html>

2. आपको यह सुनिश्चित करने की आवश्यकता हो सकती है (ब्राउज़र पर निर्भर करता है) कि आइफ्रेम के माता-पिता की ऊंचाई है। और इसके जनक हैं। और इसके जनक हैं। आदि:

html, body { height: 100%; }
— Rudie
स्रोत
9
मेरे लिए यहाँ महत्वपूर्ण हिस्सा यह था कि html और बॉडी टैग को ऊंचाई की आवश्यकता थी: 100%। धन्यवाद।
— सर्पिलिस
1
क्रोम में सिर्फ बॉडी सेट करना काम करता है, लेकिन दूसरे ब्राउजर में नहीं।
— डिंगल
— जोश क्रॉजियर
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
जहाँ तक मुझे पता है किसी भी ब्राउज़र में सीमलेस का समर्थन नहीं किया गया है
— विजुअलबीन
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।
— वुल्फ्युक
इस काम को Wordpress के अंदर करने के लिए थोड़ा सा लिया, मैंने सिर्फ अपने प्लगइन में एक शोर्ट जोड़ा। एक जादू की तरह काम करता है।
— एंडी
यह काम करता हैं। लेकिन समस्या यह है कि यह प्रत्येक आंतरिक iframe पोस्टबैक पर ऊंचाई को पुनर्गणना नहीं करेगा। क्या कोई वर्कअराउंड है?
— बेह्रोज़।
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>
— उमा शंकर गोयल
स्रोत
1
यहां पहले से ही 14 अन्य उत्तर हैं। क्या आप बता सकते हैं कि आपका उत्तर 14 अन्य लोगों से कैसे बेहतर है या कम से कम अलग है?
— स्टीफन राउच
2

अक्षत सूता के उत्तर के लिए अतिरिक्त: यह आयात करने के लिए स्पष्ट रूप से प्रत्येक मूल तत्व की ऊंचाई निर्धारित करने के लिए है, तालिका और स्तंभ का भी यदि कोई हो:

<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 add करें

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>
— तारिक जावेद
स्रोत
1

यहाँ एक संक्षिप्त कोड है। यह वर्तमान विंडो ऊंचाई को खोजने के लिए एक jquery विधि पर निर्भर करता है। IFrame के लोड होने पर यह निर्धारित करता है कि iframe की ऊंचाई वर्तमान विंडो के समान है। फिर पेज का आकार बदलने के लिए, बॉडी टैग में एक ऑनर्स इवेंट हैंडलर होता है, जो डॉक्यूमेंट के आकार बदलने पर 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पेज लोड होने पर क्षेत्र को

वीडियो या किसी भी एम्बेडेड सामग्री के साथ लैंडिंग पृष्ठों के लिए अच्छा तरीका। आपके पास एम्बेडेड वीडियो के नीचे कोई अतिरिक्त सामग्री हो सकती है, जो पृष्ठ नीचे स्क्रॉल करते समय प्रकट होती है।

उदाहरण:

सीएसएस और 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>
स्निपेट का विस्तार करें

— दाह
स्रोत
कृपया ध्यान दें, आपको फ़ायरफ़ॉक्स के लिए कुछ जावास्क्रिप्ट की आवश्यकता हो सकती है। फ़ायरफ़ॉक्स पर iframe ऊंचाई के साथ आम समस्या है।
— 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>
— टॉम विदरिंगटन
स्रोत
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 इस्तेमाल किया गया है। आप ऊंचाई के लिए सीएसएस पिक्सल का भी उपयोग कर सकते हैं।

वर्किंग कोड: लिंक वर्किंग साइट: लिंक

— अगल विशाल
स्रोत
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=...>
— तेजपाल शर्मा
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.