Second iframe to take up available height

HTML & CSS
1

Hi,

Suppose I have two iframes on a page with 100% height. Consider the iframes as header iframe and footer iframe. Both take up 100% width. The header iframe takes up 80px height and the footer iframe should take up rest of the available height i.e. 100%-80px height.

What is the best way to do this?

2

Paul, your example code does indeed demonstrate more or less what I was trying to do. Yes, I would like to avoid iframes, but in this situation where I don’t want to use any javascript or frames - iframes seems a better choice. I read somewhere it’s more appropriate to use objects instead - I’ll look into that. :slight_smile:

3

Why are you even thinking about using iframes?

4

Hi,

As Stevie said but assuming you have no other choice but to use iframes then you could possibly do something like this:

http://www.pmob.co.uk/temp/iframe100-2.htm

Just use an iframe in the header section and it should work but not sure how stable it will be.

You could just absolutely position them if IE6 support isn’t required.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>Iframe to rest of page height&#37;</title>
<style type="text/css">
body {
    font-family: verdana;
    font-size: 1em;
    background: #bef2a5;
}
html, body {
    margin:0;
    padding:0;
}
html {overflow:auto}
iframe, #main {
    width:100%;
    position:absolute;
    left:0;
    top:0;
}
#myFrame1 {height:80px;}
#myFrame2 {height:100%;}
#main {
    top:80px;
    bottom:0
}
* html #main, * html iframe {
    position:static
}
</style>
</head>
<body>
<iframe id="myFrame1" name="myFrame1" frameborder="0" src="http://www.pmob.co.uk"></iframe>
<div id="main">
    <iframe id="myFrame2" name="myFrame2" frameborder="0" src="http://www.pmob.co.uk"></iframe>
</div>
</body>
</html>

However, if possible iframes should be avoided but if you have to use them then keep them simple for best results.

5

I haven’t read Paul’s reply yet, but just want to clarify: by header Iframe I don’t mean it as an actual “header”. Only in the sense that it’s on the top - and same with footer, that it’s below the other one.

This is for a “website loading” kind of page. The top iframe shows loading related messages while the bottom one shows the website, say www.google.com for example.

Anyway, I’ll check out what Paul suggested.