我有下面的示例代码。除移动设备上的浏览器外,此功能对所有浏览器均适用。

溢出标签是问题所在。

适用于除手机以外的所有产品:

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>

最佳答案

这是工作代码。可在台式机和移动浏览器中使用。希望能帮助到你。感谢大家的回应。

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

关于html - 整页<iframe>,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17710039/

10-11 12:11