Full Page <iframe>

2019-01-29 21:06发布

站内问答 / 移动开发
1046 4 6

I have the example code below. This works fine with all browsers except for browsers on mobile devices.

The overflow tag is the issue.

Works with all except for mobile:

margin: 0; padding: 0; height: 100%; overflow: hidden;

Works with all mobile and not computers:

margin: 0; padding: 0; height: 100%;

What's the best way to get it to work on both?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }
        </style>
    </head>
    <body>
            <iframe width="100%" height="100%" src="http://www.cnn.com" />
    </body>
</html>

标签： iframe
举报
4条回答
再贱就再见
2楼-- · 2019-01-29 21:18

This is what I have used in the past. 

html, body {
  height: 100%;
  overflow: auto;
}

Also in the iframe add the following style

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%
查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
3楼-- · 2019-01-29 21:23

Here's the working code. Works in desktop and mobile browsers. hope it helps. thanks for everyone responding.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }

            #content
            {
                position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
            }
        </style>
    </head>
    <body>
        <div id="content">
            <iframe width="100%" height="100%" frameborder="0" src="http://cnn.com" />
        </div>
    </body>
</html>
查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
4楼-- · 2019-01-29 21:27

It is supported cross-browser and is fully responsive.

<iframe src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview" style="position:fixed; top:0px; bottom:0px; right:0px; width: 100%; border: none; margin:0; padding:0; overflow: hidden; z-index:999999; height: 100%;">

查看更多
0人赞 添加讨论(0) 举报
欢心
5楼-- · 2019-01-29 21:27

Put this in your CSS.

iframe{
width:100%;
height:100vh;
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)