Question

关于iframe和它的高度有很多问题。有些相似，但没有给我正确的答案。那么让我解释一下我的情况：

JSFiddle：http://jsfiddle.net/AmVhK/3/show/
编辑：http://jsfiddle.net/AmVhK/3/

有一个包含2行的表格。第一个包含一个div #toolbar，其中固定高度。第二行包含一个包含iframe的div。我需要iframe来占用工具栏div下面的可用空间。

我面临的问题是 IE标准模式（支持IE8 +）。 让我们说，窗口的高度是1000px，工具栏的高度是200px，那么iframe的高度也是1000px，滚动条也是如此。我需要iframe的高度为（页面高度 - 工具栏高度）。

如果有CSS解决方案会很好。使用JavaScript获取高度并将其设置为iframe或者包含div是我的最后选择解决方案：）

将工具栏或iframe设置为绝对位置也不适用于我的用例。 必要时标记更改（如果要删除表格）

我已经设置了以下CSS：

html, body {height: 100%}

实施它的任何好方法。

Answer 1

好的，这是我对此的尝试，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>

Answer 2

这是在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>

Answer 3

这很干净，因为它可以让您了解原始问题，提到工具栏有固定高度。最小的代码，没有包装元素，没有必要的表，IE8 + / Chrome / Fox兼容。

然而，在Dale解决方案的评论中，你提到工具栏高度是灵活的，而且需要调整iframe - 这是一个主要的游戏改变者，我建议你去除你的要求，因为它实际上是不可能实现的在CSS2中没有额外的JS和/或可怕的CSS黑客攻击。如果你不想要IE＆lt; = 9兼容性，那么使用CSS3 flexbox就可以了。

由于工具栏弹性高度的原因是你提到的不同状态的动画，我建议你使用下面的代码并设置工具栏的动画高度和iframe padding-top < / strong>同时实现所需的灵活性而不仅仅是工具栏的高度。它不需要动画本身之外的任何额外的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>

Answer 4

摆脱垂直滚动

使用此代码应该只留下内部（iframe）滚动：

html, body
{
    height:    100%;
    width:     100%;
    position: fixed;
}

备注：

需要width（与absolute一样）。

你对absolute没有帮助你是对的。

这实际上对你想要达到的目标有意义（如果我做对了）。

浏览器支持：

可能是一个小小的车，但应该从IE7（quirksmode）开始支持。

希望我能回答正确的问题。

Answer 5

解决方案是

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

Answer 6

我认为你可以简单地隐藏父滚动条并获得你想要的东西。就像简单地添加overflow-y hidden：

一样

html, body {
        height: 100%;
        overflow-y:hidden;
    }

Answer 7

应该这样做！这是快速预览链接：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，当然你不需要它），它只是反复试验。

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

7 个答案:

摆脱垂直滚动