दिलचस्प पोस्ट
जेड 3 में सॉफ्ट / हार्ड बाधाएं विशेषता और संपत्ति के बीच अंतर क्या है? JSoup UserAgent, इसे सही कैसे सेट करें? आईफोन पर एक NSString से एचटीएमएल टैग निकालें event.preventDefault () बनाम वापसी झूठी पायथन में न्यूनतम प्लगइन वास्तुकला का निर्माण जावास्क्रिप्ट – 2 तिथियों के बीच की तारीखों का पता लगाएं क्रोम डेवलपर टूल में == $ 0 (डबल बराबर डॉलर शून्य) क्या होता है? जावा में मानचित्र के मूल्य में वृद्धि करने का सबसे कारगर तरीका क्या एक अमान्य सूचक स्वचालित रूप से अपरिभाषित व्यवहार संग्रहीत है? एकाधिक फ़ाइलों में जावास्क्रिप्ट में वैश्विक चर PostgreSQL: त्रुटि: 42601: "रिकॉर्ड" लौटने वाले कार्यों के लिए एक स्तंभ परिभाषा सूची आवश्यक है मेरे एंड्रॉइड एप्लिकेशन में पीडीएफ कैसे पढ़ा जाए? मैं PHP कर्ल के साथ HTTP मूल प्रमाणीकरण का उपयोग कैसे कर सकता हूं? 8 सदस्यों की सूची में LINQ विभाजन सूची

100% कंटेनर की शेष ऊंचाई पर आइफ्रेम को व्यवस्थित करें

मैं एक बैनर और एक आइफ्रेम के साथ एक वेब पेज डिजाइन करना चाहता हूं। मुझे उम्मीद है कि iframe सभी शेष पृष्ठ की ऊंचाई को भर सकता है और ब्राउज़र आकार बदल रहा है, इसलिए इसे स्वचालित रूप से बदल दिया जाएगा। क्या यह जावास्क्रिप्ट कोड को लिखे बिना ही किया जा सकता है, केवल सीएसएस के साथ?

मैंने height:100% निर्धारित की height:100% iframe पर height:100% , परिणाम बहुत करीब है, लेकिन iframe ने बैनर div तत्व की 30px ऊंचाई सहित पूरे पृष्ठ की ऊंचाई को भरने की कोशिश की, इसलिए मुझे अनावश्यक ऊर्ध्वाधर स्क्रॉलबार मिला। यह सही नहीं है

अपडेट नोट्स : प्रश्न का अच्छी तरह से वर्णन न करने के लिए मुझे माफ़ करें, मैंने डीआईवी पर सीएसएस मार्जिन, पैडिंग एट्रिब्यूट का प्रयास किया, ताकि वेब पेज की पूरी रीमिंग ऊंचाई को सफलतापूर्वक पूरा किया जा सके, लेकिन आईआईएफएम पर काम नहीं किया।

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

किसी भी विचार की सराहना की है।

वेब के समाधान से एकत्रित समाधान "100% कंटेनर की शेष ऊंचाई पर आइफ्रेम को व्यवस्थित करें"

यह चाल समझने की है कि 100% का क्या ले लिया गया है। सीएसएस चश्मा पढ़ना आपको वहां मदद कर सकता है।

एक लंबी कहानी कम करने के लिए – "युक्त ब्लॉक" के रूप में ऐसी कोई चीज है – जो मूल तत्व की आवश्यकता नहीं है। बस ने कहा, यह पदानुक्रम का पहला तत्व है जिसकी स्थिति है: रिश्तेदार या स्थिति: निरपेक्ष। या शरीर तत्व ही अगर कुछ और नहीं है इसलिए, जब आप "चौड़ाई: 100%" कहते हैं, यह "युक्त ब्लॉक" की चौड़ाई की जांच करता है और आपके तत्व की चौड़ाई को उसी आकार में सेट करता है। अगर वहाँ कुछ और था, तो आप एक "युक्त ब्लॉक" की सामग्री प्राप्त कर सकते हैं जो स्वयं से अधिक बड़े हैं (इस प्रकार "अतिप्रवाह")।

ऊँचाई उसी तरह काम करता है एक अपवाद के साथ आप ब्राउज़र विंडो की ऊंचाई को 100% तक नहीं प्राप्त कर सकते। बहुत शीर्ष स्तर तत्व, जिसके विरुद्ध 100% की गणना की जा सकती है, शरीर (या एचटीएमएल नहीं यकीन है) तत्व है, और यह सिर्फ पर्याप्त सामग्री को समाहित करता है ऊंचाई निर्दिष्ट करना: इसके 100% पर कोई प्रभाव नहीं पड़ेगा, क्योंकि इसमें कोई "मूल तत्व" नहीं है जिसके खिलाफ 100% मापना है। खिड़की में ही गिनती नहीं है। 😉

खिड़की के बिल्कुल 100% खंड बनाने के लिए, आपके पास दो विकल्प हैं:

  1. जावास्क्रिप्ट का प्रयोग करें
  2. DOCTYPE का उपयोग न करें यह एक अच्छा अभ्यास नहीं है, लेकिन यह ब्राउज़र को "क्विट्स मोड" में डालता है, जिसमें आप तत्वों पर ऊँचाई = "100%" कर सकते हैं और यह उन्हें खिड़की के आकार में फैल जाएगा। ध्यान रखें, DOCTYPE परिवर्तनों के लिए समायोजित करने के लिए आपके बाकी पृष्ठ को शायद भी बदलना होगा

अद्यतन: मुझे यकीन नहीं है कि अगर मैं इसे पहले ही पोस्ट कर चुका था, लेकिन यह निश्चित रूप से अब पुराना है आज आप यह अपने स्टाइलशीट में कर सकते हैं: html, body { height: 100% } और यह वास्तव में आपके संपूर्ण व्यूपोर्ट तक फैल जाएगा यहां तक ​​कि एक DOCTYPE के साथ min-height: 100% आपकी स्थिति के आधार पर min-height: 100% भी उपयोगी हो सकती है

और मैं किसी को भी अब और नहीं कह रहा हूं कि कोई भी प्रश्न-मोड दस्तावेज़ बनाने के लिए , क्योंकि यह उन्हें हल करने की तुलना में अधिक सिरदर्द बनाता है। प्रत्येक ब्राउजर के पास अलग-अलग क्विट्स-मोड है, इसलिए अपने पेज को ब्राउज़रों में लगातार दिखने के लिए परिमाण के दो आदेश अधिक कठिन बनते हैं एक DOCTYPE का उपयोग करें हमेशा। अधिमानतः HTML5 एक – <!DOCTYPE html> यह याद रखना आसान है और सभी ब्राउज़रों में एक जादू की तरह काम करता है, यहां तक ​​कि 10 साल की उम्र में भी।

एकमात्र अपवाद तब होता है जब आपको IE5 या कुछ चीज़ों का समर्थन करना होता है यदि आप वहां हैं, तो आप वैसे भी अपने आप पर हैं उन प्राचीन ब्राउज़रों को आज ब्राउज़रों की तरह कुछ नहीं है, और यहां दी गई छोटी सलाह आपको उनके साथ मदद करेगी। उज्जवल पक्ष पर, यदि आप वहां हैं, तो आपको शायद एक ब्राउज़र का समर्थन करना होगा, जो संगतता समस्याओं से छुटकारा पाता है।

सौभाग्य!

अद्यतन 2: अरे, यह एक लंबा समय हो गया है! 6 साल बाद, नए विकल्प दृश्य पर हैं मैं नीचे दिए गए टिप्पणियों में बस चर्चा कर रहा था, आज के ब्राउज़रों में काम करने वाले आपके लिए यहां अधिक तरकीबें हैं I

विकल्प 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> 

हम इस समस्या का समाधान करने के लिए जावास्क्रिप्ट का उपयोग करते हैं; यहाँ स्रोत है


 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 आईडी है

pageY() जॉन Resig (jQuery के लेखक) द्वारा बनाया गया था

ऐसा करने का एक और तरीका है कि position: fixed; का उपयोग करना होगा position: fixed; पैरेंट नोड पर
अगर मैं गलत नहीं हूँ, position: fixed; व्यूोर्ट में तत्व का संबंध, इस प्रकार, एक बार जब आप इस नोड की width: 100%; और height: 100%; गुण, यह पूरी स्क्रीन पर होगा। इस बिंदु से, आप इसके अंदर <iframe> टैग डाल सकते हैं और इसे सरल width: 100%; height: 100%; साथ शेष स्थान (दोनों चौड़ाई और ऊंचाई में) पर रख सकते हैं width: 100%; height: 100%; width: 100%; height: 100%; सीएसएस निर्देश

उदाहरण कोड


  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> 

आप इसे 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> 

यहां कुछ आधुनिक दृष्टिकोण दिए गए हैं:


  • दृष्टिकोण 1 – व्यूपोर्ट रिश्तेदार इकाइयों / calc() का संयोजन

    अभिव्यक्ति calc(100vh - 30px) शेष ऊंचाई दर्शाता है। जहां 100vh ब्राउज़र की ऊंचाई है और 100vh का उपयोग प्रभावी ढंग से अन्य तत्व की ऊंचाई को विस्थापित करता है।

    उदाहरण यहाँ

     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> 

शायद इसका उत्तर पहले ही दिया गया है (ऊपर दिए गए कुछ उत्तर "ऐसा करने के ठीक" तरीके हैं), लेकिन मैंने सोचा कि मैं बस अपना समाधान भी जोड़ दूंगा।

हमारे आइफ्रेम को एक div के अंदर लोड किया जाता है, इसलिए मुझे कुछ और खिड़की की ज़रूरत थी। और हमारी परियोजना को देखने से पहले से ही jQuery पर बहुत अधिक निर्भर है, मुझे यह सबसे खूबसूरत समाधान मिल रहा है:

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

जहां निश्चित रूप से "# मिल्डल" div का आईडी है एकमात्र अतिरिक्त चीज जो आपको करने की ज़रूरत है वह इस आकार के परिवर्तन को याद करती है जब भी उपयोगकर्ता विंडो का आकार बदलता है।

 $(window).resize(function() { $("iframe").height($("#middle").height()); }); 

मीनएडेल कोड मेरे लिए काम करता है लेकिन मैंने इसे ठीक से काम करने के लिए कुछ मामूली संशोधन किए।

 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; 

यहाँ मैं क्या किया है। मुझे एक ही समस्या थी और घंटों के लिए संसाधनों के लिए वेब पर खोज करना समाप्त हो गया था।

 <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 कॉलम है।

निम्न प्रयास करें:

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

यह मेरे लिए काम किया

आप ऐसा 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> 

यह सही है, आप अपने कंटेनर के लिए 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> 

बेशक, दूसरे डिवा की ऊँचाई को आप जितनी ऊँचाई चाहते हैं, उसे बदल दें।

एचटीएमएल 5 में नया: कैल्क का उपयोग करें (ऊंचाई पर)

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

मैंने एक समान समस्या को ठीक करने के लिए डिस्प्ले का इस्तेमाल किया: तालिका यह लगभग इसके लिए काम करता है, एक छोटा खड़ी स्क्रॉल बार छोड़कर। अगर आप उस लचीली कॉलम को आइफ्रेम के अलावा किसी अन्य चीज़ के साथ पॉप्युलेट करने का प्रयास कर रहे हैं तो यह ठीक काम करता है (नहीं

निम्नलिखित एचटीएमएल ले लो

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

डिस्प्ले का उपयोग करने के लिए बाहरी डिवा को बदलें: तालिका और सुनिश्चित करें कि इसकी चौड़ाई और ऊंचाई सेट है।

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

बैनर को एक टेबल-पंक्ति बनाएं और इसकी वरीयता को अपनी ऊंचाई पर सेट करें:

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

अपने iframe (या जो भी सामग्री आपको जरुरत है) के चारों ओर एक अतिरिक्त डिवा जोड़ें और ऊंचाई के साथ तालिका-पंक्ति को 100% पर सेट करें (यदि आप ऊँचाई भरने के लिए एक आइफ्रेम एम्बेड करना चाहते हैं तो इसकी ऊंचाई निर्धारित करना महत्वपूर्ण है)

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

नीचे एक जेएसफ़िल्ड यह काम पर दिखा रहा है (एक आइफ्रेम के बिना क्योंकि यह बेला में काम नहीं करता है)

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

मुझे लगता है कि आपके पास यहां एक वैचारिक समस्या है कहने के लिए "मैंने तय की ऊंचाई तय की: 100% iframe पर, परिणाम बहुत करीब है, लेकिन iframe पूरे पृष्ठ को भरने की कोशिश की" , ठीक है, जब "100%" "पूरे" के बराबर नहीं है?

आपने आइफैम को अपने कंटेनर की पूरी ऊंचाई (जो शरीर है) भरने के लिए कहा है, लेकिन दुर्भाग्य से इसमें <div> ब्लॉक स्तर के भाई हैं, जिस पर आपने 30px बड़ा होने का अनुरोध किया है। तो माता-पिता कंटेनर की कुल संख्या को अब 100% + 30px> 100% करने के लिए कहा जा रहा है! इसलिए स्क्रॉलबार

मेरा क्या मतलब है आप इसका मतलब यह है कि आप आइफ्रेम को उपभोग करने के लिए चाहेंगे जैसे फ़्रेम और टेबल की कोशिकाओं की तरह छोड़ा जा सकता है, यानी ऊंचाई = "*" आईआईआरसी यह मौजूद नहीं है

दुर्भाग्य से मेरे ज्ञान का सबसे अच्छा तरीका यह है कि कोई भी प्रभावी ढंग से मिश्रण / गणना / घटाना पूर्ण और रिश्तेदार इकाइयों का कोई रास्ता नहीं है, इसलिए मुझे लगता है कि आप दो विकल्प कम कर रहे हैं:

  1. बिल्कुल अपने डिवि के पद पर रखें, जो इसे कंटेनर से बाहर ले जाएगा ताकि केवल आइफ्रेम ही कंटेनरों की ऊँचाई का उपभोग करे। यह आपको अन्य सभी समस्याओं के साथ छोड़ देता है, लेकिन शायद आप जो अस्पष्टता या संरेखण कर रहे हैं, ठीक हो जाएगा।

  2. वैकल्पिक रूप से आपको div के लिए एक% ऊंचाई निर्दिष्ट करने की आवश्यकता है और उस द्वारा iframe की ऊंचाई कम होनी चाहिए। यदि पूर्ण ऊँचाई वास्तव में महत्वपूर्ण है तो आपको इसके बजाय div के एक बालक तत्व को लागू करने की आवश्यकता होगी।

थोड़ी देर के लिए सीएसएस मार्ग की कोशिश करने के बाद, मैंने 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, क्रोम, Firefox 3.6 में परीक्षण किया गया

@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 iframe टैग का आईडी है

आप शरीर के आकार को भार / आकार के आकारों पर मापने और ऊँचाई (पूर्ण ऊंचाई – बैनर की ऊँचाई) को मापकर ऐसा कर सकते हैं।

ध्यान दें कि वर्तमान में IE8 बीटा 2 में आप इस ऐनरेसिस को नहीं कर सकते क्योंकि उस ईवेंट को वर्तमान में IE8 Beta2 में तोड़ दिया गया है।

या आप पुराने स्कूल जा सकते हैं और शायद एक फ़्रेमसेट का उपयोग कर सकते हैं:

 <frameset rows="30,*"> <frame src="banner.swf"/> <frame src="inner.html" /> </frameset> 

जब मैं सहमत हूं कि एक बेहतर विकल्प लगता है, मेरे पास सीएसएस ही काम करने वाला समाधान है। इसका नकारात्मक पक्ष यह है कि यदि आपको अपने आईफ़्रेम HTML दस्तावेज़ में सामग्री को अक्सर जोड़ना पड़ता है, तो आपको एक प्रतिशत गर्त समय समायोजित करना पड़ता है।

उपाय:

अपने HTML दस्तावेज़ों के लिए किसी भी ऊंचाई निर्दिष्ट नहीं करने का प्रयास करें,

 html, body, section, main-div {} 

तो केवल यह कोड:

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

ध्यान दें: डिवी अपने मुख्य अनुभाग होना चाहिए।

यह अपेक्षाकृत काम करना चाहिए आइफ्रेम वास्तव में दृश्य विंडो ऊँचाई का 300% की गणना करता है यदि आप 2 डी दस्तावेज़ (iframe में) से html सामग्री की ऊंचाई 3 गुना की तुलना में कम है, तो यह काम करता है। अगर आपको उस दस्तावेज़ को बार-बार सामग्री जोड़ने की ज़रूरत नहीं है तो यह एक स्थायी समाधान है और आप अपनी सामग्री की ऊंचाई के अनुसार अपने स्वयं के% की जरूरत पा सकते हैं।

यह काम करता है क्योंकि यह दूसरी एचटीएमएल दस्तावेज़ (एक एंबेड) को अपनी ऊंचाई से वंचित करने के लिए माता-पिता के एचटीएमएल दस्तावेज़ को रोकता है। इससे इसे रोकता है क्योंकि हमने दोनों के लिए ऊंचाई निर्दिष्ट नहीं की है। जब हम बच्चे को% देते हैं तो यह उसके अभिभावक के लिए लग रहा है, यदि नहीं, तो इसकी सामग्री ऊंचाई लेता है और सिर्फ अगर अन्य कंटेनर हाइट्स नहीं दी जाती हैं, जो मैंने कोशिश की थी।

" निर्बाध " विशेषता इस मुद्दे को हल करने का एक नया मानक है:

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

इस विशेषता को निर्दिष्ट करते समय यह सीमाओं को हटा देगा और सलाखों को स्क्रॉल करेगा और आइफ्रेम को इसकी सामग्री आकार में आकार देगा। हालांकि यह केवल क्रोम और नवीनतम सफारी में समर्थित है

इस पर यहां अधिक जानकारी: एचटीएमएल 5 आईफ़्रेम सीमलेस एट्रिब्यूट

एक सरल jQuery समाधान

इसका प्रयोग Iramed पेज के अंदर स्क्रिप्ट में करें

 $(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(); } } 

आप आईफ्रेम ऊंचाई% में सेट नहीं कर सकते क्योंकि आपकी पैरेंट बॉडी की ऊंचाई 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> 

यह नीचे उल्लेखित कोड के साथ काम करेगा I

 <iframe src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe> 

यदि आपके पास आइफ्रेम की सामग्री तक पहुंच है जो लोड हो जाएगी, तो आप अपने माता-पिता को जब भी आकार बदलते हैं, उनका आकार बदलने के लिए कह सकते हैं ..

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

अगर आपके पास पेज पर एक से अधिक आइफैम है, तो आपको बढ़ाने के लिए आईडी या अन्य चालाक तरीकों का इस्तेमाल करना पड़ सकता है। ("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> 

ऐसा क्यों नहीं (शरीर पैडिंग / मार्जिन के लिए मामूली समायोजन के साथ)

 <script> var oF = document.getElementById("iframe1"); oF.style.height = document.body.clientHeight - oF.offsetTop - 0; </script>