เมื่อฉันใช้รหัสต่อไปนี้เพื่อสร้าง iframe:
<iframe src="mypage.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>iframe ไม่ได้ไปตลอดทาง - "ชายแดน" สีขาวขนาด 10 พิกเซลล้อมรอบ iframe ฉันจะแก้ปัญหานี้ได้อย่างไร
นี่คือภาพของปัญหา:
คำตอบ:
bodyมีอัตรากำไรเริ่มต้นในเบราว์เซอร์ส่วนใหญ่ ลอง:
body {
margin: 0;
}
iframeในหน้าเว็บที่มี
เพื่อให้ครอบคลุมวิวพอร์ตทั้งหมดคุณสามารถใช้:
<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และ JS เพื่อแสดงเมื่อผู้ใช้คลิกตัวควบคุมที่เหมาะสม
หมายเหตุ: ในการเติมพื้นที่มุมมองของผู้ปกครองแทนของวิวพอร์ตทั้งการเปลี่ยนแปลงไปposition:fixedposition:absolute
คุณยังสามารถใช้ความยาวร้อยละของวิวพอร์ตเพื่อให้ได้สิ่งนี้:
5.1.2 ความยาวของวิวพอร์ต - เปอร์เซ็นต์: หน่วย 'vw', 'vh', 'vmin', 'vmax'
ความยาวร้อยละ viewport มีความสัมพันธ์กับขนาดของบล็อกที่มีเริ่มต้น เมื่อความสูงหรือความกว้างของบล็อกเริ่มต้นที่มีการเปลี่ยนแปลงพวกเขาจะถูกปรับตาม
โดยที่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>นี้ได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยที่สุด - การสนับสนุนสามารถพบได้ที่นี่
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>ลองเพิ่มแอตทริบิวต์ต่อไปนี้:
scrolling="no"เป็นไปไม่ได้ที่จะพูดโดยไม่เห็นตัวอย่างอยู่ แต่ลองให้ทั้งสองร่าง margin: 0px
frameborder=0คุณอาจจะลอง
การเพิ่มสิ่งนี้ลงในiframeของคุณอาจแก้ไขปัญหาได้:
frameborder="0" seamless="seamless"ฉันได้สร้างส่วนสำคัญแม่แบบรวมกันบางคำตอบดังกล่าวข้างต้น
ใช้รหัสนี้แทน:
<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>