CODEWITHSUNDEEP
javascripthtmlcssiframe
chongzixin
chongzixin

Reputation: 1981

change css dynamically according to size of parent iframe

My partner sites embed my website using an iframe. I recently change my website and it is now longer than what my partner sites have allocated in their iframe (and they have all set scrolling=no.

Given that I can't change my partner sites, I am trying to change my own site now so that everything still works. I noticed that I can add <div style='width:325px;height:400px;overflow:scroll'> as long as width and height is the same as the parent iframe.

Is there a way I can dynamically obtain width and height of parent iframe so that I can apply it onto my own site? Or can I use viewport to determine how big the parent container is? 

<iframe srcdoc="
<html><body>
<div style='width:325px;height:400px;overflow:scroll'>
<h1>Hello,<b>world1</b>.</h1><br /><h1>Hello,<b>world2</b>.</h1><br /><h1>Hello,<b>world3</b>.</h1><br /><h1>Hello,<b>world4</b>.</h1><br /><h1>Hello,<b>world5</b>.</h1><br /><h1>Hello,<b>world6</b>.</h1><br /><h1>Hello,<b>world7</b>.</h1><br /><h1>Hello,<b>world8</b>.</h1><br />
</div></body></html>" 
scrolling="no" width=325px height=400px>

</iframe>

Upvotes: 2

Views: 172

Answers (1)

Julio Feferman
Julio Feferman

Reputation: 2664

You can use viewport width and height: width:100vw height:100vh

Snippet:

<iframe srcdoc="
<html><body>
<div style='width:100vw;height:100vh;overflow:scroll'>
<h1>Hello,<b>world1</b>.</h1><br /><h1>Hello,<b>world2</b>.</h1><br /><h1>Hello,<b>world3</b>.</h1><br /><h1>Hello,<b>world4</b>.</h1><br /><h1>Hello,<b>world5</b>.</h1><br /><h1>Hello,<b>world6</b>.</h1><br /><h1>Hello,<b>world7</b>.</h1><br /><h1>Hello,<b>world8</b>.</h1><br />
</div></body></html>" 
scrolling="no" width=325px height=400px>

</iframe>

Upvotes: 1

Related Questions