Make Iframe to fit 100% of container's remaini-第4页回答

I want to design a web page with a banner and an iframe. I hope the iframe can fill all the remaining page height and be resized automatically as the browser is resizing. Is it possible to get it done without writing Javascript code, only with CSS?

I tried set height:100% on iframe, the result is quite close but the iframe tried to fill the whole page height, including the 30px height of banner div element, so I got unneccessary vertical scrollbar. It's not perfect.

Update Notes: Excuse me for not describing the question well, I tried CSS margin, padding attribute on DIV to occupy the whole remining height of a web page successfully, but the trick didn't work on iframe.

 <body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe>
</body>

Any idea is appreciated.

标签： html css iframe

26条回答

甜甜的少女心

2楼-- · 2019-01-03 08:20

Another way to do that would be to use the position: fixed; on parent node.
If I am not mistaken, position: fixed; ties the element to viewport, thus, once you give this node width: 100%; and height: 100%; properties, it will span over entire screen. From this point on, you can put <iframe> tag inside it and span it over remaining space (both in width and in height) with simple width: 100%; height: 100%; CSS instruction.

Example code

    body {
        margin: 0px;
        padding: 0px;
    }

    /* iframe's parent node */
    div#root {
        position: fixed;
        width: 100%;
        height: 100%;
    }

    /* iframe itself */
    div#root > iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
    }

   <html>
        <head>
            <title>iframe Test</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        </head>
        <body>
            <div id="root">
                <iframe src="http://stackoverflow.com/">
                    Your browser does not support inline frames.
                </iframe>
            </div>
        </body>
    </html>

0人赞添加讨论(0) 举报

手持菜刀，她持情操

3楼-- · 2019-01-03 08:21

Maybe this has been answered already (a few answers above are "correct" ways of doing this), but I thought I'd just add my solution as well.

Our iFrame is loaded within a div, hence I needed something else then window.height. And seeing our project already relies heavily on jQuery, I find this to be the most elegant solution:

$("iframe").height($("#middle").height());

Where of course "#middle" is the id of the div. The only extra thing you'll need to do is recall this size change whenever the user resizes the window.

$(window).resize(function() {
    $("iframe").height($("#middle").height());
});

0人赞添加讨论(0) 举报

Fickle 薄情

4楼-- · 2019-01-03 08:22

Here are a few modern approaches:

Approach 1 - Combination of viewport relative units / calc().

The expression calc(100vh - 30px) represents the remaining height. Where 100vh is the height of the browser and the usage of calc() effectively displaces the height of the other element.

Example Here
```
body {
    margin: 0;
}
.banner {
    background: #f00;
    height: 30px;
}
iframe {
    display: block;
    background: #000;
    border: none;
    height: calc(100vh - 30px);
    width: 100%;
}
```
```
<div class="banner"></div>
<iframe></iframe>
```
Support for calc() here; support for viewport relative units here.

Approach 2 - Flexbox approach

Example Here

Set the display of the common parent element to flex, along with flex-direction: column (assuming you want the elements to stack on top of each other). Then set flex-grow: 1 on the child iframe element in order for it to fill the remaining space.
```
body {
    margin: 0;
}
.parent {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.parent .banner {
    background: #f00;
    width: 100%;
    height: 30px;
}
.parent iframe {
    background: #000;
    border: none;
    flex-grow: 1;
}
```
```
<div class="parent">
    <div class="banner"></div>
    <iframe></iframe>
</div>
```
Since this approach has less support¹, I'd suggest going with the aforementioned approach.

¹_{Though it seems to work in Chrome/FF, it doesn't work in IE (the first method works in all current browsers).}

0人赞添加讨论(0) 举报

Summer. ? 凉城

5楼-- · 2019-01-03 08:22

The "seamless" attribute is a new standard aiming to solve this issue:

http://www.w3schools.com/tags/att_iframe_seamless.asp

When assigning this attribute it will remove borders and scroll bars and size the iframe to its content size. though it is only supported in Chrome and latest Safari

more on this here: HTML5 iFrame Seamless Attribute

0人赞添加讨论(0) 举报

该账号已被封号

6楼-- · 2019-01-03 08:23

You can do this with html/css like this:

<body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="position:fixed;top:30px;bottom:0px;width:100%;"></iframe>
</body>

0人赞添加讨论(0) 举报

成全新的幸福

7楼-- · 2019-01-03 08:24

or you can go old-school and use a frameset perhaps:

<frameset rows="30,*">
  <frame src="banner.swf"/>
  <frame src="inner.html" />
</frameset>

0人赞添加讨论(0) 举报

Make Iframe to fit 100% of container's remaini

Here are a few modern approaches:

Approach 1 - Combination of viewport relative units / calc().

Approach 2 - Flexbox approach

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间

Approach 1 - Combination of viewport relative units / `calc()`.