home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

ทำไม iframe Absolute Positioning ตั้ง Height/Width ไม่ได้?

iframe เป็น Replaced Element ไม่ใช่ Non-replaced

Replaced Elements (iframe, img, video, input) มี Layout Behavior ต่างจาก Div/Block Elements

แก้ไข: ใช้ Wrapper Div

<div class="iframe-wrapper">
  <iframe src="..."></iframe>
</div>

.iframe-wrapper {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}
.iframe-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

Wrapper (Div) เป็น Block Element จัด Layout ด้วย Absolute Positioning ได้ แล้ว iframe ขยายเต็ม Wrapper