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

前端 未结 3 1064
粉色の甜心
粉色の甜心 2020-12-16 11:22

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.



        
3条回答
  •  粉色の甜心
    2020-12-16 11:26

    Since we are in the age of CSS3, you can do this by using viewport units. These units allow you to specify sizes in terms of percentages of the viewport width and viewport height. This is the user's viewport, also known as screen. However, in all major browsers I've tried it, if you put an iframe inside a div, which is inside another div and positioned relative, the viewport units are relative to this div. And since 100 viewport height units mean 100% height, you can do like this:

    I find this to be the best solution possible, since it is cross-domain, and displays exactly like you want it without any javascript or other complex stuff.

    And most importantly, it works on all browsers, even mobile ones (tested on android and iphone)!

提交回复
热议问题