„Pełny ekran” <iframe>

163

Kiedy używam następującego kodu do tworzenia elementu iframe:

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

Element iframe nie przechodzi do końca - biała „ramka” o rozmiarze 10 pikseli otacza element iframe. Jak mogłem to rozwiązać?

Oto obraz problemu:

Zrzut ekranu witryny

html iframe Trufa
źródło

Odpowiedzi:

103

W bodywiększości przeglądarek ma domyślny margines. Próbować:

body {
    margin: 0;
}

na stronie z rozszerzeniem iframe.

kevingessner
źródło
301

Aby pokryć całą rzutnię, możesz użyć:

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

I pamiętaj, aby ustawić marginesy strony w ramce na 0, np body { margin: 0; }. - Właściwie nie jest to konieczne w przypadku tego rozwiązania.

Używam tego z powodzeniem, z dodatkowym display:nonei JS, aby pokazać go, gdy użytkownik kliknie odpowiednią kontrolkę.

Uwaga: Aby wypełnić obszar widoku nadrzędnego zamiast całej rzutni, zmień position:fixedna position:absolute.

Lawrence Dol
źródło
31
Ta odpowiedź wyjaśnia, jak sprawić, by element iframe zajmował cały ekran
Mark Ma,
Możesz także użyć długości wyświetlanych w procentach ..
Josh Crozier,
2
zaakceptowana odpowiedź nie działa dla mnie. to zrobił. dzięki.
AlexVPerl
2
Świetna odpowiedź! Prosty, dla wielu przeglądarek i definitywny.
blankip
Doskonale współpracuje z HTML 5
break7533
39

Aby to osiągnąć, możesz również użyć długości wyświetlanych w procentach :

5.1.2. Procentowe długości rzutni: jednostki „vw”, „vh”, „vmin”, „vmax”

Procentowe długości rzutni odnoszą się do rozmiaru początkowego zawierającego bloku. Gdy wysokość lub szerokość początkowego bloku zawierającego zostanie zmieniona, są one odpowiednio skalowane.

Gdzie 100vhoznacza wysokość rzutni i podobnie 100vwreprezentuje szerokość.

Przykład tutaj

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>
Rozwiń fragment

Jest to obsługiwane w większości nowoczesnych przeglądarek - pomoc można znaleźć tutaj .

Josh Crozier
źródło
8

Użyj frameborder="0". Oto pełny przykład:

    <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
źródło
7

Spróbuj dodać następujący atrybut:

scrolling="no"
cmaxtech
źródło
5

Nie można tego powiedzieć bez żywego przykładu, ale spróbuj podać oba ciała margin: 0px

Pekka
źródło
@Trufa to może być margines, ale może to być też coś innego. Najlepiej wykorzystać widok „Układ” Firebuga, aby się tego dowiedzieć
Pekka
2

Mógłbyś spróbować frameborder=0.

Nowicjusz
źródło
Dzięki, ale to jest „wewnątrz iframe”. Musiałem zmodyfikować zewnętrzną stronę (nie wiedziałem o tym, dopóki @kevingessner nie odpowiedział) dziękuję !!
Trufa
2

Dodanie tego do elementu iframe może rozwiązać problem:

frameborder="0"  seamless="seamless"
pentexnyx
źródło
1
@FABBRj Świetnie, mogłem pomóc: D
pentexnyx
0

Stworzyłem GIST szablon jednoczącej niektóre z powyższych odpowiedzi.

Ohad Cohen
źródło
-2

Użyj tego kodu zamiast niego:

    <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
źródło
7
Nie jest już obsługiwane w HTML5
Hari Karam Singh