ansaurus

Question

Make Iframe to fit 100% of container's remaining height

Answer 1

A:

You could try height and width 102% and give it an absolute positon top:-1%;left:-1%;.

tsilb 2008-11-28 08:45:50

Oh, I love HTML and CSS :)

Aaron Digulla 2008-11-28 09:01:56

Answer 2

+10 A:

Vilx- 2008-11-28 09:11:32

Answer 3

+2 A:

It's right, you are showing an iframe with 100% height respect to its container: the body.

Try this:

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

Of course, change the height of the second div to the height you want.

ARemesal 2008-11-28 09:24:50

Answer 4

+1 A:

I think you have a conceptual problem here. To say "I tried set height:100% on iframe, the result is quite close but the iframe tried to fill the whole page", well, when has "100%" not been equal to "whole"?

You have asked the iframe to fill the entire height of its container (which is the body) but unfortunately it has a block level sibling in the <div> above which you've asked to be 30px big. So the parent container total is now being asked to size to 100% + 30px > 100%! Hence scrollbars.

What I think you mean is that you would like the iframe to consume what's left like frames and table cells can, i.e. height="*". IIRC this doesn't exist.

Unfortunately to the best of my knowledge there is no way to effectively mix/calculate/subtract absolute and relative units either, so I think you're reduced to two options:

Absolutely position your div, which will take it out of the container so the iframe alone will consume it's containers height. This leaves you with all manner of other problems though, but perhaps for what you're doing opacity or alignment would be ok.
Alternatively you need to specify a % height for the div and reduce the height of the iframe by that much. If the absolute height is really that important you'll need to apply that to a child element of the div instead.

annakata 2008-11-28 09:41:23

Answer 5

A:

You can do this by measuring the body size on load/resize events and setting the height to the (full height - banner height).

Note that currently in IE8 Beta2 you can't do this onresize as that event is currently broken in IE8 Beta2.

scunliffe 2008-11-28 11:39:36

Answer 6

+7 A:

We use a JavaScript to solve this problem; here is the source.

    function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
var buffer = 20; //scroll bar buffer
function resizeIframe() {
    var height = document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
    resizeDebug();
}
document.getElementById('ifm').onload=resizeIframe;
window.onresize = resizeIframe;

Note: ifm is the iframe ID

pageY() was created by John Resig (the author of jQuery)

MichAdel 2008-12-01 03:57:25

resizeDebug(); //needs to be commented out or included

Martin Murphy 2009-09-10 19:01:24

Answer 7

A:

MichAdel thanks huge for the flawlessly working code, you have saved my project's bacon!

2009-01-30 12:21:29

Answer 8

A:

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

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

Amir Arad 2009-03-30 11:49:40

Answer 9

A:

Hello,

I have the same problem with Darkthread but I did not understand the solution provided by MichAdel.

Can someone explain how can I adjust the iframe height, so that the unneccessary vertical scrollbar disapears?

Thank you in advance!

2009-05-15 07:45:30

Answer 10

+4 A:

You can do it with DOCTYPE, but you have to use table. Check this out:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}

.header {border-bottom:1px solid #000}
.content {height:100%}
</style>
</head>
<body>
<table>
  <tr><td class="header"><div><h1>Header</h1></div></td></tr>
  <tr><td class="content">
   <iframe src="http://google.com/" frameborder="0"></td></tr>
</table>
</body>
</html>

ducu 2009-07-13 10:30:47

Answer 11

A:

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

HTML Code:

<!DOCTYPE html>
<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/"&gt;
                Your browser does not support inline frames.
            </iframe>
        </div>
    </body>
</html>

CSS Code:

@charset "utf-8";

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

D1SoveR 2010-03-11 14:29:24

Answer 12

A:

docu, you are the best!

wannabedocu 2010-05-14 00:15:46

Answer 13

+2 A:

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());
});

Tim Geerts 2010-07-08 11:17:35

Answer 14

A:

Having tried the css route for a while, I ended up writing something fairly basic in jQuery that did the job for me:

function iframeHeight() {
    var newHeight = $j(window).height();
    var buffer = 180;     // space required for any other elements on the page 
    var newIframeHeight = newHeight - buffer;
    $j('iframe').css('height',newIframeHeight);    //this will aply to all iframes on the page, so you may want to make your jquery selector more specific.
}

// When DOM ready
$(function() {
    window.onresize = iframeHeight;
}

Tested in IE8, Chrome, Firefox 3.6

ben 2010-10-15 08:58:55

Answer 15

A:

hi i have same problem in css ,try to display two iframe inside table i am giving height=100% for body,form,table even td but it is not working when i give its in pixel it working but not auto fitting the window.

prateem 2010-10-27 09:31:32

ansaurus

tags:

views:

answers:

Make Iframe to fit 100% of container's remaining height

Example code

related questions