iFrame 宽度 100% 高度 100%答案

【问题标题】：iFrame width-100% Height-100%iFrame 宽度 100% 高度 100%
【发布时间】：2016-08-09 03:34:36
【问题描述】：

我希望有人可以帮助我，因为我的 html 知识有限。我正在使用 iFrame 打开内部和外部的其他页面。我已经让 iFrame 打开宽度 100% 和高度 100%，但是我遇到了以下问题，希望有人可以调整我的代码。

我有一个页眉，然后是 iFrame，然后是一个灰色页脚。我的问题是这个

当 iframe 打开子页面时，页脚不会向下移动，这会导致出现一个额外的滚动条，一个用于 iFrame，另一个用于页脚。
我的子页面在 iFrame 中没有完全显示，它的页脚似乎在底部被稍微剪掉了。
有没有办法让任何滚动条和 iframe 完全扩展到子页面大小

请参见下面的示例 - With Grey Footer

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Page</title>
    <meta name="generator" content="Web Builder 11">
    <link href="css/inline_frame.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
  </head>
  <body>
    <div id="container">
      <iframe name="InlineFrame1" id="InlineFrame1" style="position:fixed;left:0px;right;0px;bottom:0px;top:95px;width:100%;height:100%;z-index:1;" src="./page1.html"></iframe>
    </div>
    <div id="PageHeader1" style="position:absolute;text-align:left;left:0px;top:0px;width:100%;height:100px;z-index:7777;">
      <div id="wb_CssMenu1" style="position:absolute;left:30px;top:70px;width:375px;height:30px;z-index:0;">
        <ul>
          <li class="firstmain"><a href="./page1.html" target="InlineFrame1">Item&nbsp;1</a></li>
          <li><a href="http://go.microsoft.com/fwlink/p/?LinkId=255142" target="InlineFrame1">Item&nbsp;2</a></li>
          <li><a href="http://www.aljazeera.com/news/" target="InlineFrame1">Item&nbsp;3</a></li>
          <li><a href="http://www.bbc.co.uk/news" target="InlineFrame1">Item&nbsp;4</a></li>
        </ul>
      </div>
    </div>
    <div id="PageFooter1" style="position:absolute;overflow:hidden;text-align:left;left:0px;top:530px;width:100%;height:210px;z-index:2;">
    </div>
  </body>
</html>

在下面的第二个示例中，我删除了页脚，但仍然存在上面的问题 2 和 3。我确实想要自己的页脚

No Footer

<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Page</title>
    <meta name="generator" content="Web Builder 11">
    <link href="css/inline_frame.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
  </head>
  <body>
    <div id="container">
      <iframe name="InlineFrame1" id="InlineFrame1" style="position:fixed;left:0px;right;0px;bottom:0px;top:95px;width:100%;height:100%;z-index:1;" src="./page1.html"></iframe>
    </div>
    <div id="PageHeader1" style="position:absolute;text-align:left;left:0px;top:0px;width:100%;height:100px;z-index:7777;">
      <div id="wb_CssMenu1" style="position:absolute;left:30px;top:70px;width:375px;height:30px;z-index:0;">
        <ul>
          <li class="firstmain"><a href="./page1.html" target="InlineFrame1">Item&nbsp;1</a></li>
          <li><a href="http://go.microsoft.com/fwlink/p/?LinkId=255142" target="InlineFrame1">Item&nbsp;2</a></li>
          <li><a href="http://www.aljazeera.com/news/" target="InlineFrame1">Item&nbsp;3</a></li>
          <li><a href="http://www.bbc.co.uk/news" target="InlineFrame1">Item&nbsp;4</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

如果有人可以调整我的代码，我将不胜感激

【问题讨论】：

在可以选择第 2、3、4 项时需要静态页脚？？
感谢您查看诺丽，但就像我说的我的 html 技能非常有限，我所做的只是将代码中的“绝对”一词更改为静态，我的页脚不再显示。我假设我做错了什么
没问题，只是解释一下你想做什么我把它写成简单的代码，所以我对你基本上想做什么有点困惑。
我想要的只是当 iFrame 在其中打开子页面时完全打开，而不是剪裁子页面的底部。在我原来的帖子中，我附上了 2 个 url，显示问题 1 有页脚和 1 没有。它们被称为 WITH GREY FOOTER 和 NO FOOTER 请看一下。在这两个示例中，当您到达其页脚时，子页面并未完全显示。我还希望能够拥有自己的页脚，所以我有自己的页眉、iframe 和页脚，当子页面在 iframe 中打开时，我的页脚也会移动。希望这有一些意义。

【解决方案2】：

   <!--</div>-->

<div id="PageHeader1" style="width:100%;">
    <div id="wb_CssMenu1" style="width:375px;height:auto;z-index:0;">
        <ul>
            <li class="firstmain">
                <a href="./page1.html" target="InlineFrame1">Item&       nbsp;1</a>
            </li>
            <li>
                <a href="http://go.microsoft.com/fwlink/p/?LinkId=255142" target="InlineFrame1">Item&nbsp;2</a>
            </li>
            <li>
                <a href="http://www.aljazeera.com/news/" target="InlineFrame1">Item&nbsp;3</a>
            </li>
            <li>
                <a href="http://www.bbc.co.uk/news" target="InlineFrame1">Item&nbsp;4</a>
            </li>
        </ul>
    </div>
</div>
<!--</div>-->
<!--</div> 2-->

<div id="container">


    <iframe name="InlineFrame1" id="InlineFrame1" style="width:100%;    min-height:100vh;height:100%"  frameborder="0"        scrolling="auto" src="http://www.bbc.co.uk/news"></iframe>


</div>
<!--</div> 2-->
<!--div 3-->
<div id="PageFooter1" style="position:relative; overflow:hidden;text-align:left;width:100%;height:210px;">
    <h1>footer</h1>
</div>
<!--div 3-->

试试这个你想要吗？如果不告诉我哪里错了

【讨论】：