Full-screen iframe with a height of 100%

2018-12-31 07:55发布

站内问答 / JavaScript
1724 15 5

Is iframe height=100% supported in all browsers?

I am using doctype as:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

In my iframe code, if I say:

<iframe src="xyz.pdf" width="100%" height="100%" />

I mean will it actually take the height of the remaining page (as there is another frame on top with fixed height of 50px) Is this supported in all major browsers (IE/Firefox/Safari) ?

Also regarding scrollbars, even though I say scrolling="no", I can see disabled scrollbars in Firefox...How do I completely hide scrollbars and set the iframe height automatically?

15条回答
素衣白纱
2楼-- · 2018-12-31 08:25

http://embedresponsively.com/

This is a great resource and has worked very well, the few times I've used it. Creates the following code....

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
查看更多
0人赞 添加讨论(0) 举报
只靠听说
3楼-- · 2018-12-31 08:25

The following tested working

<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
查看更多
0人赞 添加讨论(0) 举报
萌妹纸的霸气范
4楼-- · 2018-12-31 08:26

You first add css

html,body{
height:100%;
}

This will be the html:

 <div style="position:relative;height:100%;max-width:500px;margin:auto">
    <iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
    </iframe>
    </div>
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)