"पूर्ण स्क्रीन" <iframe>

163

जब मैं iframe बनाने के लिए निम्न कोड का उपयोग करता हूं:

<iframe src="mypage.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

Iframe पूरे रास्ते नहीं जाता है - एक 10px सफ़ेद "बॉर्डर" iframe को घेर लेता है। मैं इसे कैसे हल कर सकता हूं?

यहाँ समस्या की एक छवि है:

साइट का स्क्रीनशॉट

html iframe

— Trufa
स्रोत

103

bodyअधिकांश ब्राउज़र में एक डिफ़ॉल्ट मार्जिन है। प्रयत्न:

body {
    margin: 0;
}

साथ पेज में iframe।

— kevingessner
स्रोत

301

संपूर्ण व्यूपोर्ट को कवर करने के लिए, आप इसका उपयोग कर सकते हैं:

<iframe src="mypage.html" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
    Your browser doesn't support iframes
</iframe>

~~और फ़्रेम किए गए पेज के मार्जिन को 0, जैसे, सेट करना सुनिश्चित करें body { margin: 0; }।~~ - वास्तव में, इस समाधान के साथ यह आवश्यक नहीं है।

मैं इसे सफलतापूर्वक उपयोग कर रहा हूं, display:noneजब उपयोगकर्ता उचित नियंत्रण पर क्लिक करता है, तो इसे दिखाने के लिए एक अतिरिक्त और जेएस के साथ ।

नोट: पूरे व्यूपोर्ट के बजाय माता-पिता के दृश्य क्षेत्र को भरने के लिए, इसमें बदलाव position:fixedकरें position:absolute।

— लॉरेंस डोल
स्रोत

31

यह उत्तर हल करता है कि आईफ्रेम को पूरी स्क्रीन पर कैसे बनाया जाए

— मार्क मा

आप व्यूपोर्ट-प्रतिशत लंबाई का भी उपयोग कर सकते हैं ..

— जोश क्रोज़िएर

2

स्वीकृत जवाब मेरे काम नहीं आया। यह किया। धन्यवाद।

— AlexVPerl

2

बहुत बढ़िया जवाब! सरल, क्रॉस-ब्राउज़र और निश्चित।

— कंबल

एचटीएमएल 5 के साथ पूरी तरह से काम करता है

— break7533

39

इसे प्राप्त करने के लिए आप व्यूपोर्ट-प्रतिशत लंबाई का भी उपयोग कर सकते हैं :

5.1.2। व्यूपोर्ट-प्रतिशत लंबाई: 'vw', 'vh', 'vmin', 'vmax' इकाइयाँ

व्यूपोर्ट-प्रतिशत लंबाई प्रारंभिक ब्लॉक वाले आकार के सापेक्ष है। जब प्रारंभिक युक्त ब्लॉक की ऊंचाई या चौड़ाई को बदल दिया जाता है, तो उन्हें तदनुसार स्केल किया जाता है।

जहां 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>

स्निपेट का विस्तार करें

यह सबसे आधुनिक ब्राउज़रों में समर्थित है - समर्थन यहां पाया जा सकता है ।

— जोश क्रोज़ियर
स्रोत

8

का उपयोग करें frameborder="0"। यहाँ एक पूर्ण उदाहरण है:

    <iframe src="mypage.htm" height="100%" width="100%" frameborder="0">Your browser doesnot support iframes<a href="myPageURL.htm"> click here to view the page directly. </a></iframe>

— रितिक
स्रोत

7

निम्नलिखित विशेषता जोड़ने का प्रयास करें:

scrolling="no"

— cmaxtech
स्रोत

5

एक जीवित उदाहरण देखे बिना कहना असंभव है, लेकिन दोनों शरीर देने की कोशिश करें margin: 0px

— पेका
स्रोत

@ ट्रूफा यह मार्जिन हो सकता है, लेकिन यह कुछ और भी हो सकता है। फायरबग के "लेआउट" दृश्य का सबसे अच्छा उपयोग यह पता लगाने के लिए

— Pekka

2

आप कोशिश कर सकते हैं frameborder=0।

— नौसिखिया
स्रोत

धन्यवाद, लेकिन यह "iframe के अंदर" मुझे बाहर संशोधित करने की आवश्यकता थी (मुझे नहीं पता था कि जब तक @kevingessner जवाब नहीं देता है तब तक धन्यवाद !!

— ट्रूफा

2

इसे अपने iframe में जोड़ने से समस्या हल हो सकती है:

frameborder="0"  seamless="seamless"

— pentexnyx
स्रोत

1

@FABBRj महान मैं मदद कर सकता है: D

— pentexnyx

0

मैंने ऊपर दिए गए कुछ उत्तरों को एकजुट करते हुए एक जीआईटी टेम्पलेट बनाया है ।

— ओहद कोहेन
स्रोत

-2

इसके बजाय इस कोड का उपयोग करें:

    <frameset rows="100%,*">
        <frame src="-------------------------URL-------------------------------">
        <noframes>
            <body>
                Your browser does not support frames. To wiew this page please use supporting browsers.
            </body>
        </noframes>
    </frameset>

— IşIk İşİtEn
स्रोत

7

HTML5 में अब समर्थित नहीं

— हरि करम सिंह