Setting iframe to take remaining space in page

2019-03-27 21:01发布

站内文章 / HTML/CSS

19 0

傲

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

There are quite a lot of questions regarding iframe and it's height. Some are similar but not giving me the right answer. So let me explain my case:

JSFiddle: http://jsfiddle.net/AmVhK/3/show/
Editor: http://jsfiddle.net/AmVhK/3/

There is a table with 2 rows. First one contains a div #toolbar with fixed height. Second row contains a div which holds an iframe. I need the iframe to take the available space below the toolbar div.

Problem I am facing is in IE standards mode (supporting IE8+). Let's say, the height of the window is 1000px and height of toolbar is 200px, then the height of the iframe is also 1000px and so has scrollbars. I need the iframe to have height of (page height-toolbar height).

It would be good if there is a CSS solution. Using JavaScript to get the height available and setting it to the iframe or it's containing div is the last resort solution for me :)

Setting the toolbar or iframe to absolute position also won't work for my use case. Markup change is ok if necessary (if you want to remove tables)

I have already set the following CSS:

html, body {height: 100%}

Any good solution to implement it.

回答1:

OK here's my attempt at this, there's an issue with the iframe wanting to have a horizontal scroll in IE7 but the layout is good, I had to give up because fighting with IE7 makes me want to chew out my own eyes, hopefully someone could expand from here.

<!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>

回答2:

Here is a solution tested in IE8 and 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>

回答3:

This is as clean as it can get minding your original question mentions the toolbar has a fixed height. Minimal code, no wrapper elements and no tables necessary, IE8+/Chrome/Fox compatible.

However, in the comments of Dale's solution, you mention the toolbar height being flexible instead and a requirement for the iframe to adjust - that is a major gamechanger and I would suggest you strip that of your requirements as it's practically impossible to achieve in CSS2 without extra JS and/or horrendous CSS hacks. If you didn't want IE<=9 compatibility, this would be very possible using CSS3 flexbox.

Since the reason for the toolbar flexible height would be animation for different states as you mentioned, I would suggest you use the code below and animate the toolbar height and iframe padding-top at the same time to achieve the desired flexibility instead of just the toolbar height. It does not require any extra JavaScript outside of the animation itself, so the only "disadvantage" is to animate 2 properties instead of 1. The rest of the layout will finely adjust.

<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>

回答4:

Getting rid of the vertical scroll

Using this code should leave with only the inner (iframe) scrolls:

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

Notes:

The width is needed (like with absolute).
You are right about absolute not helping you.
This actually makes sense for what you are trying to achieve (if I got it right).

Browser Support:

Might be a little buggy, but should be supported as of IE7 (quirksmode).

Hope I got the question right.

回答5:

The solution is

<!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>

回答6:

I think you can simply hide the parent scroll bar and get what you want. Like by simply adding overflow-y hidden:

html, body {
        height: 100%;
        overflow-y:hidden;
    }

回答7:

This should do it! Here's the quick preview link: 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>

I've tested it in both Chrome and IE8 and it works on my side. It might bug in JSFiddle in IE8 but it shouldn't if you view it as a separate page (in normal conditions that is).

Edit: Made some slight changes to the original code. However, you will have to change the <td> that holds the iFrame height value to the new height if you change the height of the toolbar. With IE there is no magic % value (unless you use JS, which you don't want of course) for it, it's just trial and error.