8

关于 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%}

任何好的解决方案来实现它。

4

7 回答 7

4

这是在 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>
于 2012-11-19T08:48:29.373 回答
4

好的，这是我的尝试，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>
于 2012-11-19T08:39:01.217 回答
3

这很干净，因为它可以让您注意到您的原始问题提到工具栏有一个固定的的高度。最少的代码，没有包装元素，也不需要表格，兼容 IE8+/Chrome/Fox。

但是，在 Dale 的解决方案的评论中，您提到工具栏高度是灵活的，并且需要 iframe 进行调整 - 这是一个主要的游戏规则改变者，我建议您去掉您的要求，因为在 CSS2 中如果没有它实际上是不可能实现的额外的 JS 和/或可怕的 CSS hack。如果您不希望 IE<=9 兼容，那么使用 CSS3 flexbox 是很有可能的。

由于工具栏灵活高度的原因是您提到的不同状态的动画，我建议您使用下面的代码并同时为工具栏高度和 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>
于 2012-11-24T13:46:01.710 回答
2

摆脱垂直滚动

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

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

笔记：

  1. width是必需的（如absolute）。
  2. 你absolute不帮助你是对的。
  3. 这实际上对您要实现的目标有意义（如果我做对了）。

浏览器支持：

可能有点问题，但应该从 IE7 ( quirksmode ) 开始支持。

希望我的问题是正确的。

于 2012-11-25T05:13:23.743 回答
1

解决方案是

<!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>
于 2012-11-24T07:13:57.750 回答
0

我认为你可以简单地隐藏父滚动条并得到你想要的。就像通过简单地添加溢出-y隐藏：

html, body {
        height: 100%;
        overflow-y:hidden;
    }
于 2012-11-26T06:23:59.170 回答
-1

这应该做！这是快速预览链接：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 中出现错误，但如果您将其视为单独的页面（在正常情况下），它不应该。

编辑： 对原始代码进行了一些细微的更改。但是，<td>如果您更改工具栏的高度，则必须将保存 iFrame 高度值的 更改为新高度。对于 IE，没有神奇的 % 值（除非你使用 JS，当然你不想要它），它只是反复试验。

于 2012-11-20T23:44:53.193 回答