上一篇: OpenLayers – HTML DIV覆盖下一篇:html – 打印预览在每页上重复tf...

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

HTML 发布时间：2022-04-14 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html – 设置iframe以占用页面中的剩余空间，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

有一个2行的表.第一个包含一个固定高度的div #toolbar.第二行包含一个包含iframe的div.我需要iframe来获取工具栏div下方的可用空间.@H_197_4@

我面临的问题是IE标准模式(支持IE8).比方说,窗口的高度是1000px,工具栏的高度是200px,那么iframe的高度也是1000px,滚动条也是如此.我需要iframe的高度为(页面高度 – 工具栏高度).@H_197_4@

如果有一个CSS解决方案会很好.使用JavaScript获取高度可用并将其设置为iframe或者它包含div是我的最后手段解决方案:)@H_197_4@

将工具栏或iframe设置为绝对位置也不适用于我的用例.如果需要,标记更改是可以的(如果要删除表)@H_197_4@

我已经设置了以下CSS：@H_197_4@

html,body {height: 100%}

任何好的解决方案来实现它.@H_197_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>