问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

整页 <iframe>

社区维基
1
新手上路，请多包涵

我有下面的示例代码。这适用于除移动设备上的浏览器之外的所有浏览器。

溢出标签是问题所在。

适用于除移动设备以外的所有设备：

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

适用于所有移动设备而非计算机：

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

让它在两者上都起作用的最佳方法是什么？

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

原文由 Lacer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssiframe
阅读 534
2 个回答
得票最新
社区维基
1
✓ 已被采纳

这是工作代码。适用于桌面和移动浏览器。希望能帮助到你。感谢大家的回应。

 <!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"></iframe>
        </div>
    </body>
</html>

原文由 Lacer 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

这是跨浏览器和完全响应的：

 <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%;
  ">
</iframe>

原文由 tawsif torabi 发布，翻译遵循 CC BY-SA 4.0 许可协议

查看全部 2 个回答
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏