Question

我希望有人可以帮助我，因为我的HTML知识有限。我正在使用iFrame打开内部和外部的其他页面。我有iFrame打开宽度100％和高度100％，但我有以下问题，并希望有人可以调整我的代码。

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

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

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

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

Answer 1

Text

试试这个你想要的吗？如果没有告诉我我错在哪里

Answer 2

尝试使用此代码，您可能想要填充底部和顶部以满足您的需求：

＆＃13;

.flexible-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.flexible-container iframe,   
.flexible-container object,  
.flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

＆＃13;

<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="http://lifehacker.com/"></iframe>
</div>

＆＃13;

iFrame宽度-100％高度-100％

2 个答案: