我希望有人能帮助我，因为我的 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 1</a></li>
<li><a href="http://go.microsoft.com/fwlink/p/?LinkId=255142" target="InlineFrame1">Item 2</a></li>
<li><a href="http://www.aljazeera.com/news/" target="InlineFrame1">Item 3</a></li>
<li><a href="http://www.bbc.co.uk/news" target="InlineFrame1">Item 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。我确实想要我自己的页脚
<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 1</a></li>
<li><a href="http://go.microsoft.com/fwlink/p/?LinkId=255142" target="InlineFrame1">Item 2</a></li>
<li><a href="http://www.aljazeera.com/news/" target="InlineFrame1">Item 3</a></li>
<li><a href="http://www.bbc.co.uk/news" target="InlineFrame1">Item 4</a></li>
</ul>
</div>
</div>
</body>
</html>
如果有人可以修改我的代码，我将不胜感激
最佳答案
试试这段代码，你可能想稍微调整一下填充底部和顶部以满足你的需要:
.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%;
}<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="http://lifehacker.com/"></iframe>
</div>关于html - iFrame 宽度 - 100% 高度 - 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36676327/