设置 iframe 以占用页面中的剩余空间答案

【问题标题】：Setting iframe to take remaining space in page设置 iframe 以占用页面中的剩余空间
【发布时间】：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 年还有一个！

标签： html css internet-explorer iframe height

【解决方案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 width="100%" height="99.6%" cellspacing="0" cellpadding="0" border="0">
    <tbody>
        <tr>
            <td valign="top" id="toolbar">Toolbar
            </td>
        </tr>
        <tr>
            <td width="100%" valign="top" height="80.5%">
                <div align="center" id="contentiframewrapper">
                     <iframe width="100%" 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 评论时，我不知道您希望工具栏灵活，这是一个游戏规则改变者，将不得不重写解决方案。