设置 iframe 以占用页面中的剩余空间
Posted
技术标签:
【中文标题】设置 iframe 以占用页面中的剩余空间【英文标题】：Setting iframe to take remaining space in page 【发布时间】：2012-11-05 01:13:06 【问题描述】：关于 iframe 及其高度有很多问题。有些是相似的，但没有给我正确的答案。所以让我解释一下我的情况：
JSFiddle：http://jsfiddle.net/AmVhK/3/show/ 编辑：http://jsfiddle.net/AmVhK/3/
有一个有 2 行的表。第一个包含一个 fixed 高度的 div #toolbar。第二行包含一个包含 iframe 的 div。我需要 iframe 来占用工具栏 div 下方的可用空间。
我面临的问题是 IE 标准模式（支持 IE8+）。 比方说，窗口的高度是 1000px，工具栏的高度是 200px，那么 iframe 的高度也是 1000px，滚动条也是如此。我需要 iframe 的高度为（页面高度-工具栏高度）。
如果有 CSS 解决方案就好了。使用 javascript 获取可用高度并将其设置为 iframe 或包含 div 是我最后的解决方案:)
将工具栏或 iframe 设置为绝对位置也不适用于我的用例。 如有必要，可以更改标记（如果您想删除表格）
我已经设置了以下 CSS：
html, body height: 100%
实现它的任何好的解决方案。
【问题讨论】：
我想你想要这个jsfiddle.net/AmVhK/6 @RohitAzad，iframe 占用的空间仍然比可用空间多。 您是否对使用表格一事无成？ hmmmm，去老派并使用框架集？ （例如meingutscheincode.de/gutschein-anzeigen/…） 哦不，框架集，我的一个客户在 2012 年还有一个！ 【参考方案1】：我认为您可以简单地隐藏父滚动条并获得所需的内容。就像简单地添加overflow-y hidden一样：
html, body
height: 100%;
overflow-y:hidden;
【讨论】：
【参考方案2】：摆脱垂直滚动
使用此代码应该只留下内部 (iframe) 滚动：
html, body
height: 100%;
width: 100%;
position: fixed;
注意事项：
-
需要
width（如absolute）。
absolute 没有帮助你是对的。
这实际上对于您想要实现的目标是有意义的（如果我说得对的话）。
浏览器支持：
可能有点问题，但应该从 IE7 (quirksmode) 开始支持。
希望我的问题是正确的。
【讨论】：
【参考方案3】：这很干净，因为它可以让您注意到您最初的问题提到工具栏具有固定高度。最少的代码，无需包装元素，无需表格，兼容 IE8+/Chrome/Fox。
但是，在 Dale 解决方案的 cmets 中，您提到工具栏高度是灵活的，并且需要 iframe 进行调整 - 这是一个主要的游戏规则改变者，我建议您去掉您的要求，因为它实际上是不可能实现的在 CSS2 中没有额外的 JS 和/或可怕的 CSS hack。如果你不希望 IE
由于工具栏灵活高度的原因是您提到的不同状态的动画，我建议您使用下面的代码为工具栏 height 和 iframe padding-top 同时实现所需的灵活性而不仅仅是工具栏的高度。它不需要动画本身之外的任何额外 JavaScript，因此唯一的“缺点”是动画 2 个属性而不是 1 个。布局的其余部分将进行微调。
<style type="text/css">
html, body
height: 100%;
margin: 0;
#toolbar
position: absolute;
width: 100%;
height: 200px; /* animate this */
#cblt_content
display: block;
width: 100%;
height: 100%;
padding-top: 200px; /* and this */
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border: 0;
</style>
<div id="toolbar">Toolbar</div>
<iframe id="cblt_content" src="https://c9.io/"></iframe>
【讨论】：
【参考方案4】：解决办法是
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - Webduos Demo</title>
<style type="text/css">
* border: 0; line-height: 0; margin: 0; padding: 0;
html, body height: 100%;
#layout position: relative; width: 100%; min-height: 100%; overflow-y: hidden; background-color: green;
#toolbar width: 100%; height: 160px; background-color: blue;
#content-wrapper position:absolute; top:180px; bottom: 0px; width: 100%; background-color: #0000dd;
#content width: 100%; height: 100%;
</style>
</head>
<body>
<div id="layout">
<div id="toolbar">
</div>
<div id="content-wrapper">
<iframe id="content" name="content" src="https://google.com/" border="0"></iframe>
</div>
</div>
</body>
</html>
【讨论】：
【参考方案5】：应该这样做！这是快速预览链接：http://jsfiddle.net/AmVhK/15/show/
<style type="text/css">
html, body
height: 100%;
margin: 0;
padding: 0;
#contentiframewrapper, #cblt_content
/* max-height: 100%;
min-height: 99.9%;*/
height: 99.9%;
margin: 0;
padding: 0;
line-height: 0;
#toolbar
height: 100px !important;
background-color: #CCC;
text-align: center;
font-size: 50px;
vertical-align: middle;
</style>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td valign="top" id="toolbar">Toolbar
</td>
</tr>
<tr>
<td valign="top" >
<div align="center" id="contentiframewrapper">
<iframe frameborder="0" name="cblt_content" id="cblt_content" src="https://c9.io/" border="0"></iframe>
</div>
</td>
</tr>
</tbody>
</table>
我已经在 Chrome 和 IE8 中对其进行了测试，并且它适用于我。它可能会在 IE8 中的 JSFiddle 中出现错误，但如果您将其视为单独的页面（在正常情况下），它不应该。
编辑：
对原代码做了一些小改动。但是，如果您更改工具栏的高度，则必须将保存 iFrame 高度值的<td> 更改为新高度。对于 IE，没有神奇的 % 值（除非你使用 JS，当然你不想要它），它只是反复试验。
【讨论】：
% 的高度不会考虑更大的屏幕。所以虽然它可能很适合你的屏幕..如果我的分辨率是你的两倍（或一半），事情可能 - 并且可能会 - 搞砸了。 尝试弄乱浏览器大小，如果您进入屏幕的 1/3 以下，滚动条会显示（至少这是我所经历的），iFrame 会缩放到更大浏览器尺寸没有任何问题，顺便说一句，我正在使用 15 英寸笔记本电脑，它可能会对上网本造成问题，但没有 JS，我认为这接近于最好的解决方案（不是指我的解决方案，而是使用 % 值高度）。 我想我必须同意。我以前解决过这个问题，但总是用一些 javascript 技巧。 我投了反对票，因为这不是一个好的解决方案。为此使用表格是不必要的，并且在语义上是错误的，并且您尝试建议的高度百分比操场产生的问题比它试图解决的要多。 好吧，店主说“如有必要”可以更改标记，据我个人了解，您可以更改标记，但这并不是最好的选择。我只是为现有的问题提供了一个解决方案，但请告诉我您使用“带表”而不使用 JS 来解决问题？我看到您在这方面知识渊博，所以我可能需要向您学习。【参考方案6】：这是在 IE8 和 FF17 中测试的解决方案
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type="text/css">
*
border: 0;
line-height: 0;
margin: 0;
padding: 0;
html,
body
height: 100%;
#layout
position: relative;
width: 100%;
min-height: 100%;
overflow-y: hidden;
background-color: green;
#toolbar
width: 100%;
height: 200px;
background-color: blue;
#content-wrapper
position: absolute;
top: 200px;
bottom: 0px;
width: 100%;
background-color: red;
#content
width: 100%;
height: 100%;
</style>
</head>
<body>
<div id="layout">
<div id="toolbar">
</div>
<div id="content-wrapper">
<iframe id="content" name="content" src="https://c9.io/" border="0"></iframe>
</div>
</div>
</body>
</html>
【讨论】：
我们的答案非常相似，但我输入了一个 overflow-y: hidden;消除这个问题:) 编辑：边框：0；行高：0；在 FF 中固定 100%，宽度在 IE8 中完美（没有 IE9 和 7），当然可以在工具栏中重置行高。 在 FireBug 中看到完美的高度和 line-height: 0 真的很奇怪固定到 Firefox.. IE 需要溢出-y：隐藏；交叉浏览是一门艺术！ 是否可以在不使用绝对位置的情况下实现这一点。工具栏的高度会随着用户交互的动画而变化，并且会有所不同。 iframe 应该随之移动，所以我想最好把它留给浏览器。 你可以用 JavaScript 做动态部分来更新工具栏高度和内容包装器顶部，但没有找到没有绝对定位的解决方案！【参考方案7】：好的，这是我的尝试，iframe 有问题，希望在 IE7 中有水平滚动，但布局很好，我不得不放弃，因为与 IE7 的斗争让我想咬自己的眼睛，希望有人可以从这里扩展。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>iframelayout</title>
<style>
html, body
margin: 0;
padding: 0;
height: 100%;
div, iframe
margin: 0;
padding: 0;
border: 0;
.container
position: relative;
width: 100%;
height: 100%;
background: #222;
.toolbar
height: 200px;
background: #aaa;
.iframe-container
position: absolute;
top: 200px;
bottom: 0;
width: 100%;
background: #555;
overflow-y: hidden;
.iframe-container iframe
position: absolute;
width: 100%;
height: 100%;
</style>
</head>
<body>
<div class="container">
<div class="toolbar">
</div>
<div class="iframe-container">
<iframe src="https://c9.io/" frameborder="0">Your browser is kaput!</iframe>
</div>
</div>
</body>
</html>
【讨论】：
抱歉回复晚了。是否可以在不使用绝对位置的情况下实现这一点。工具栏的高度会随着用户交互的动画而变化，并且会有所不同。 iframe 应该随之移动，所以我想最好把它留给浏览器。 是否可以将.iframe-container top 属性与工具栏一起设置动画？
例如，您可以为设置 .iframe-container top: 200px; 的工具栏动画提供回调。 为工具栏的计算高度
工具栏的高度会随着按下的不同按钮而变化，因为不同的功能集需要不同的标记和高度来显示。
@sv_in 需要灵活高度的工具栏使整个问题变得更加困难，您应该在 OP 中提到这一点。设置高度，没有表格和非常干净的代码就相当简单。当我写 OP 评论时，我不知道您希望工具栏灵活，这是一个游戏规则改变者，将不得不重写解决方案。以上是关于设置 iframe 以占用页面中的剩余空间的主要内容，如果未能解决你的问题，请参考以下文章