Khi tôi sử dụng đoạn mã sau để tạo ra một iframe:"toàn màn hình" <iframe>
<iframe src="mypage.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>
Iframe không đi tất cả các cách-một 10px trắng "border" bao quanh iframe. Làm thế nào tôi có thể giải quyết điều này?
Dưới đây là một hình ảnh của vấn đề:
body có lề mặc định trong hầu hết các trình duyệt. Thử:
body {
margin: 0;
}
trong trang có iframe.
Impossible để nói mà không nhìn thấy một ví dụ sống, nhưng hãy thử đưa cả hai cơ quan margin: 0px
Bạn có thể thử frameborder=0.
Cảm ơn nhưng đó là "bên trong iframe" Tôi cần phải sửa đổi bên ngoài (Tôi không biết rằng cho đến khi @kevingessner trả lời) cảm ơn bạn !! – Trufa
Hãy thử thêm các thuộc tính sau:
scrolling="no"
Sử dụng frameborder="0". Dưới đâ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>
Sử dụng mã này để thay thế của 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>
Không còn được hỗ trợ trong HTML5 –
Để trang trải toàn bộ khung nhìn, bạn có thể sử dụng:
<iframe src="mypage.html" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; 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 để thiết lập tỷ lệ lề của trang được đóng khung thành 0, ví dụ:
- Thực ra, điều này không cần thiết với giải pháp này.body { margin: 0; }.
Tôi đang sử dụng thành công, với display:none và JS bổ sung để hiển thị khi người dùng nhấp vào điều khiển thích hợp.
Câu trả lời này giải quyết cách tạo iframe chiếm toàn bộ màn hình –
Bạn cũng có thể sử dụng [viewport-percent lengths] (http: // stackoverflow. com/a/27832759/2680216) .. –
câu trả lời được chấp nhận không phù hợp với tôi. điều này đã làm. cảm ơn. – AlexVPerl
Bạn cũng có thể sử dụng viewport-percentage lengths để đạt được điều này:
5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
Chiều dài viewport-tỷ lệ có liên quan đến kích thước của ban đầu chứa khối. Khi chiều cao hoặc chiều rộng của khối chứa ban đầu được thay đổi, chúng được thu nhỏ cho phù hợp.
Trường hợp 100vh đại diện cho chiều cao của chế độ xem và tương tự như vậy 100vw thể hiện chiều rộng.
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>này được hỗ trợ trong hầu hết các trình duyệt hiện đại - support can be found here.
Ngay tại đây là vàng! –
Hoàn hảo !!! làm việc như người ở! Cảm ơn nhiều!! – Trufa
Tìm kiếm google 'reset css' –
không hoạt động trên chrome – AlexVPerl