Toàn màn hình

163

Khi tôi sử dụng đoạn mã sau để tạo iframe:

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

Khung nội tuyến không đi hết đường viền "viền" màu trắng 10px bao quanh khung nội tuyến. Làm thế nào tôi có thể giải quyết điều này?

Dưới đây là hình ảnh của vấn đề:

Ảnh chụp màn hình của trang web

html iframe

— Trufa
nguồn

103

Có bodymột lề mặc định trong hầu hết các trình duyệt. Thử:

body {
    margin: 0;
}

trong trang với iframe.

— kevingessner
nguồn

300

Để bao quát toàn bộ khung nhìn, bạn có thể sử dụng:

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

~~Và hãy chắc chắn đặt lề của trang được đóng khung thành 0, ví dụ : body { margin: 0; }.~~ - Trên thực tế, điều này là không cần thiết với giải pháp này.

Tôi đang sử dụng thành công, với một bổ sung display:nonevà JS để hiển thị nó khi người dùng nhấp vào điều khiển thích hợp.

Lưu ý: Để lấp đầy khu vực xem của phụ huynh thay vì toàn bộ chế độ xem, hãy đổi position:fixedthành position:absolute.

— Lawrence Dol
nguồn

31

Câu trả lời này giải quyết cách làm cho iframe chiếm toàn bộ màn hình

— Đánh dấu Ma

Bạn cũng có thể sử dụng độ dài phần trăm khung nhìn ..

— Josh Crozier

2

chấp nhận câu trả lời đã không làm việc cho tôi. điều này đã làm cảm ơn.

— AlexVPerl

2

Câu trả lời chính xác! Đơn giản, đa trình duyệt và dứt khoát.

— trống

Hoạt động hoàn hảo với HTML 5

— break7533

39

Bạn cũng có thể sử dụng độ dài phần trăm khung nhìn để đạt được điều này:

5.1.2. Độ dài phần trăm lượt xem: các đơn vị 'vw', 'vh', 'vmin', 'vmax'

Độ dài phần trăm khung nhìn liên quan đến kích thước của khối chứa ban đầu. Khi chiều cao hoặc chiều rộng của khối chứa ban đầu bị thay đổi, chúng được chia tỷ lệ tương ứng.

Trong đó 100vhđại diện cho chiều cao của khung nhìn và tương tự như vậy 100vwđại diện cho chiều rộng.

Ví dụ ở đây

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>

Mở rộng đoạn trích

Điều này được hỗ trợ trong hầu hết các trình duyệt hiện đại - hỗ trợ có thể được tìm thấy ở đây .

— Josh Crozier
nguồn

8

Sử dụng frameborder="0". Đây là một ví dụ đầy đủ:

    <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
nguồn

7

Hãy thử thêm thuộc tính sau:

scrolling="no"

— cmaxtech
nguồn

5

Không thể nói mà không nhìn thấy một ví dụ trực tiếp, nhưng hãy thử cho cả hai cơ thể margin: 0px

— Bắc Kinh
nguồn

@Trufa nó có thể là lề, nhưng nó cũng có thể là một cái gì đó khác. Sử dụng tốt nhất chế độ xem "Bố cục" của Fireorms để tìm hiểu

— Pekka

2

Bạn có thể thử frameborder=0.

— Người mới
nguồn

Cảm ơn nhưng đó là "bên trong iframe" Tôi cần sửa đổi bên ngoài (tôi không biết điều đó cho đến khi @kevingessner trả lời) cảm ơn bạn !!

— Trufa

2

Thêm phần này vào iframe của bạn có thể giải quyết vấn đề:

frameborder="0"  seamless="seamless"

— ngũ giác
nguồn

1

@FABBRj Tuyệt vời tôi có thể giúp: D

— pentexnyx

0

Tôi đã tạo ra một mẫu ý chính thống nhất một số câu trả lời ở trên.

— Ohad Cohen
nguồn

-2

Sử dụng mã này thay vì 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şIk
nguồn

7

Không còn được hỗ trợ trong HTML5

— Hari Karam Singh