How to create a resizable
Since directly adding
resize:both to the
<iframe> doesn't work, we have to use a "hack".
height:100% will take up all the available space of the parent, we can indirectly make the
Start with a
<div>, wrap it around the
<iframe>, then give that
<div> the css:
height: ?; width: ?; /*Replace the question marks with your own values*/ overflow-x: auto; overflow-y: hidden; resize:both;
Why is overflow used? Because it is nessescary for the resize to work. If you don't belive me, you can try messing around with a working example here. Why is
overflow-y hidden? Well, to prevent double horizontal scrollbars which just look bad.
Next, now comes the trick, give your
<iframe> the css:
width:100%; height:100%; border:none;
border:none is added to the
<iframe> for the nice look, and simplicity.
And it's that simple.
<iframes> you should use // instead of http:// or https:// for the
src value. Example:
//example.com instead of
Last updated: Sept. 16, 2017.
If you have any problems/questions, please ask them in the comments section. Have fun coding!