Question

我正在尝试使用CSS开发布局并使用Iframe。如何在不滚动的情况下在iframe中显示完整页面？ iframe是否适合显示完整的网页？

以下是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>layout basic method web</title>
    <style type="text/css" media="screen">
        #container
        {
        width: 100%;
        height: 100%;
        background-color: #fff;
        }

        iframe
        {
        border-style: none;
        width: 100%; 
        height: 100%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="top">
            <h1>Header</h1>
        </div>
        <div id="content">
            <h2>Subheading</h2>
            <IFRAME name='iframe1' id="iframe1" src="http://www.yahoo.com"></IFRAME>
        </div>
        <div id="footer">
            Footer
        </div>
    </div>
</body>
</html>

如果您测试代码，您会看到CSS在页面内创建滚动。如何摆脱这个卷轴并显示所有页面？

最诚挚的问候，

更新：

我快到了。我只需要向上/向下滚动超过页眉，就像翻过页脚一样。那可能吗？请参阅代码。只需复制/粘贴即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method </title>
<style type="text/css" media="screen">
    #printhead {display:none;}

    html {
        height:100%; 
        max-height:100%; 
        padding:0; 
        margin:0; 
        border:0; 
        background:#fff; 
        font-size:80%; 
        font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
        /* hide overflow:hidden from IE5/Mac */ 
        /* \*/ 
        /*overflow: hidden;*/ 
        /* */ 
    }

    body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}

    #content {display:block; height:100%; max-height:100%; overflow:hidden; padding-left:0px; position:relative; z-index:3; word-wrap:break-word;}

    /*#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; font-size:1em; z-index:5; color:#000; border-bottom:1px solid #000; }*/

    #head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; color:#000; font-size:1em; border-bottom:1px solid #000;}

    #foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:25px; background:#fff; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;}

    .pad1 {display:block; width:18px; height:50px; float:left;}

    .pad2 {display:block; height:50px;}

    .pad3 {display:block; height:500px;}

    #content p {padding:5px;}

    .bold {font-size:1.2em; font-weight:bold;}

    .red {color:#c00; margin-left:5px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;}

    h2 {margin-left:5px;}

    h3 {margin-left:5px;}
</style>
</head>
<body>
<div id="head">
    <div class="pad1"></div><h1>Header</h1>
</div>
<div id="content">
<div class="pad2"></div>
    <IFRAME name="teste" src="http://www.yahoo.com" width="100%" height="100%" frameborder=0></IFRAME>
<!--<div class="pad3"></div>-->
</div>
<div id="foot">Footer</div>
</body>
</html>

有关如何实现这一目标的任何线索？

最诚挚的问候，

Answer 1

您必须设置iframe的高度以匹配您正在查看的页面的高度。

如果页面位于同一个域中，您可以使用javascript动态调整框架大小以匹配您正在查看的页面的正文大小。有一些jQuery插件可以做到这一点。

如果是外部域名，则无法执行此操作，因此您只需设置iframe的height属性即可。

Answer 2

如果您想摆脱主窗口上的滚动条，请添加overflow样式：

#container {
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
}

Answer 3

您可以使用javascript执行此操作：

   function resizeFrame(){
    var iframe = parent.document.getElementById('id of your iframe');  
    $(iframe).height($('#your top html tag inside your iframe').height());
    $(iframe).width($('#your top html tag inside your iframe').width());
   }

然后在load＆amp; amp;在任何会改变表单长度的隐藏/取消隐藏操作之后： resizeFrame（）;

如果在iframe内的顶级html标签上有边距/填充，则可能需要将px添加到height（）/ width（），如下所示：

    $(iframe).height($('#your top html tag inside your iframe').height()+40);
    $(iframe).width($('#your top html tag inside your iframe').width()+20);

Answer 4

iframe无法相对于其显示的页面调整大小。您需要使用javascript调整其大小，这意味着您事先知道页面的大小。如果你刚刚在你的内容中显示另一个页面的内容，确实看看ajax。

这里有一个非常简单的例子： http://aleembawany.com/2005/09/01/ajax-instant-tutorial

请注意，由于浏览器的安全设置，在跨域上下文中使用ajax加载页面可能不起作用。

CSS和Iframe。如何在iframe中无需滚动查看整页？

4 个答案: