Rohita Khatiwada Rohita Khatiwada - 3 months ago 12
HTML Question

How to make width and height of iframe same as its parent div?

I have a iframe inside a div. I want the size of iframe to be exactly the size of its parent div. I used following code to set the width and height of iframe.

<iframe src="./myPage.aspx" id="myIframe"
style="position: relative;
height: 100%;
width: 100%'
scrolling='no'
frameborder='0'">


But width of iframe is not same as div, also both horizontal and vertical scrollbar are displayed.

Answer

you have a lot of typos.

a correct markup should be like:

<iframe src="./myPage.aspx" id="myIframe" scrolling="no" frameborder="0"
    style="position: relative; height: 100%; width: 100%;">
...
</iframe>

also, if this frame already has an ID, why don't you put this in CSS like this (from a separate stylesheet file):

#myIframe
{
    position: relative;
    height: 100%;
    width: 100%; 
}

and HTML

<iframe src="./myPage.aspx" id="myIframe" scrolling="no" frameborder="0" > ... </iframe>

mind that scrolling & frameborder are iframe attribute, not style attribute.

Comments