“Tam ekran” <çerçeve>

163

Bir iframe oluşturmak için aşağıdaki kodu kullandığımda:

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

İframe sonuna kadar gitmez - iframe'i 10 piksellik beyaz bir "kenarlık" çevreler. Bunu nasıl çözebilirim?

İşte sorunun bir görüntüsü:

Sitenin ekran görüntüsü

html iframe

— Trufa
kaynak

103

bodyÇoğu tarayıcı varsayılan bir kenar boşluğu vardır. Deneyin:

body {
    margin: 0;
}

sayfasında iframe.

— kevingessner
kaynak

301

Tüm görünümü kapsamak için şunları kullanabilirsiniz:

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

~~Çerçeveli sayfanın kenar boşluklarını 0 olarak ayarladığınızdan emin olun, örn body { margin: 0; }.~~ - Aslında, bu çözüm için bu gerekli değildir.

display:noneKullanıcı uygun denetimi tıklattığında göstermek için ek ve JS ile bunu başarıyla kullanıyorum .

Not: ebeveynin görüntüleme alanını tamamı yerine görünüm, değişim doldurmak için position:fixediçin position:absolute.

— Lawrence Dol
kaynak

31

Bu cevap iframe'in tüm ekranı işgal etmesini nasıl çözer

— Mark Ma

Görünüm yüzdesi uzunluklarını da kullanabilirsiniz ..

— Josh Crozier

2

kabul edilen cevap benim için çalışmadı. bunu yaptı. Teşekkürler.

— AlexVPerl

2

Mükemmel cevap! Basit, çapraz tarayıcı ve kesin.

— blankip

HTML 5 ile mükemmel çalışır

— break7533

39

Bunu başarmak için görünüm yüzdesi uzunluklarını da kullanabilirsiniz :

5.1.2. Görünüm yüzdesi uzunlukları: 'vw', 'vh', 'vmin', 'vmax' birimleri

Görünüm yüzdesi uzunlukları, ilk içeren bloğun boyutuna göredir. İlk içeren bloğun yüksekliği veya genişliği değiştirildiğinde, bunlar uygun şekilde ölçeklenir.

Burada 100vhgörünüm penceresinin yüksekliğini ve aynı şekilde 100vwgenişliği temsil eder.

Buraya Örnek

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>

Snippet'i genişlet

Bu, çoğu modern tarayıcıda desteklenir - destek burada bulunabilir .

— Josh Crozier
kaynak

8

Kullanın frameborder="0". İşte tam bir örnek:

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

— Hritik
kaynak

7

Aşağıdaki özelliği eklemeyi deneyin:

scrolling="no"

— cmaxtech
kaynak

5

Canlı bir örnek görmeden söylemek imkansız, ama her iki vücuda da vermeyi deneyin margin: 0px

— Pekka
kaynak

@Trufa marj olabilir, ama başka bir şey de olabilir. Bulmak için en iyi Firebug'un "Düzen" görünümünü kullanın

— Pekka

2

Deneyebilirsin frameborder=0.

— Çaylak
kaynak

Teşekkürler ama bu "iframe içinde" Ben dış değiştirmek gerekiyordu (@kevingessner cevap kadar ben bilmiyordum) teşekkür ederim !!

— Trufa

2

Bunu iframe'inize eklemek sorunu çözebilir:

frameborder="0"  seamless="seamless"

— pentexnyx
kaynak

1

@FABBRj Harika yardımcı olabilirim: D

— pentexnyx

0

Yukarıdaki cevaplardan bazılarını birleştiren bir öz şablon oluşturdum .

— Ohad Cohen
kaynak

-2

Bunun yerine bu kodu kullanın:

    <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şık İşİtEn
kaynak

7

Artık HTML5'te desteklenmiyor

— Hari Karam Singh