Question

我的合作伙伴网站使用iframe嵌入了我的网站。我最近更改了我的网站，现在它比我的合作伙伴网站在他们的iframe中分配的时间更长（并且他们都设置了scrolling=no。

鉴于我无法更改我的合作伙伴网站，我正在尝试更改自己的网站，以便一切仍然有效。我注意到只要宽度和高度与父iframe相同，我就可以添加<div style='width:325px;height:400px;overflow:scroll'>。

有没有办法可以动态获取父iframe的宽度和高度，以便我可以将它应用到我自己的网站上？或者我可以使用视口来确定父容器的大小？

＆＃13;

<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>

＆＃13;

Answer 1

您可以使用视口宽度和高度：width:100vw height:100vh

段：

<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>

根据父iframe的大小动态更改css

1 个答案: