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

Question

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

sv_*_*_in 7 html css iframe height internet-explorer

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Dal*_*ale 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，7 月前
查看次数：	11033 次
最近记录：	13 年，7 月前