iframe / CSS：强制iframe适合屏幕 [英] Iframe/CSS: Forcing Iframe to fit screen

问题描述

我目前想要一个iframe适合我的屏幕的大小，和任何其他用户使用它在不同的分辨率，除了无论我尝试，我将最终与iframe太小或高度太大导致双滚动条。 （iframe和页面本身有滚动条）。

我的目标是让iframe只适合85％的页面宽度屏幕顶部（也有效），然后底部适合我的浏览器底部的边缘（这是我被卡住...）

HTML

 < div id =maindivclass =maindiv 
< iframe id =theiframeclass =iframeautowidthseamless src =http：//whateverdomain.com>< / iframe> 
< / div> 
  
 
 
 
  CSS ：
  .maindiv {
 width：85％; 
 top：100px; 
} 
 
 .iframeautowidth {
 left：0px; 
 top：0px; 
 bottom：0px; 
 width：85％; 
 height：100％; 
 border：0 
 overflow：hidden; 
 display：block; 
 margin：0; 
 float：left; 
} 
  
 
 b $ b 
如果计算任何东西，我有最新的jquery在我的页面上运行，如果它会帮助。
解决方案
使用您的iframe的 onload（）事件和窗口的 onresize（）事件以将iframe调整为所需的大小。
 
 
 
 此Microsoft支持文章解释得很好。
 
 
 
 FYI，在javascript  screen.width   screen.height 会给你屏幕分辨率。 
 
I'm currently trying to have an iframe fit the size of my screen, and any other user using it at different resolutions, except no matter what I try I'll either end up with the iframe being too small or the height being too large causing a double scroll bar. (The iframe and the page itself having scroll bars).

My objective is having the iframe fit only 85% width of the page (which works!), 100px from the top of the screen (also works), and then for the bottom to fit the edge of the bottom of my browser (that's where I'm stuck...)

HTML
<div id="maindiv" class="maindiv">
<iframe id="theiframe" class="iframeautowidth" seamless src="http://whateverdomain.com></iframe>
</div>
CSS:
.maindiv {
width: 85%; 
top: 100px;
}

.iframeautowidth {
left: 0px;
top: 0px;
bottom: 0px;
width: 85%;
height: 100%;
border: 0
overflow: hidden;
display: block;
margin: 0;
float: left;
}
If it counts for anything, I have the latest jquery running on my page if it'll help. Thanks in advance!
解决方案
Use the onload() event of your iframe and the onresize() event of the window to resize the iframe to the required size.

This Microsoft Support article explains it well.

FYI, in javascript screen.width & screen.height will give you the screen resolution. 

                        
这篇关于iframe / CSS：强制iframe适合屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！