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

发布时间：2020-12-14 18:26:09 所属栏目：资源来源：网络整理

导读：关于iframe和它的高度有很多问题.有些相似,但没有给我正确的答案.那么让我解释一下我的情况： JSFiddle：http://jsfiddle.net/AmVhK/3/show/ 编辑：http://jsfiddle.net/AmVhK/3/ 有一个2行的表.第一个包含一个固定高度的div #toolbar.第二行包含一个包含ifr

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

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

解决方法

好的,这是我的尝试,有一个问题,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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!