100% height minus header

Exodus · #1 (**permalink**) Oct 27th, 2007, 11:43

Hi! Basically i am trying to create a layout where the main content is 100% height of the page minus a fixed size header.

I have received some great help and have came to this

http://tinyurl.com/3dkeuh - html
http://tinyurl.com/2nq868 - css

The page looks perfect in ie 6 but in other browsers such as ie 7, firefox and safari the frames that hold the content and nav are only small in size, i want to replicate the ie 6 results and get the frames to stretch the full height of the page.

I am certain this is a CSS error and any help on the matter would be greatly appreciated!

Thanks,
-Exodus

Blake121 · #2 (**permalink**) Oct 27th, 2007, 11:49

Code: Select all

iframe {
 height: 100%;
}

Try that in your CSS.

Exodus · #3 (**permalink**) Oct 27th, 2007, 19:58

That dosen't seem to have changed anything. Any other ideas?

dab42pat · #4 (**permalink**) Oct 27th, 2007, 20:47

change css to this.

HTML: Select all

#content {
 float: right;
 height: 420px;
 width: 75%;
}
#nav {
 height: 420px;
 width: 20%;
}

just adjust 420px until it looks ok.

Exodus · #5 (**permalink**) Oct 27th, 2007, 20:52

That would be okay except i am trying to keep the layout as fluid as possible

If i set the height of the frames to a fixed size, i.e. around 420px as you suggested, it would look fine in some resolutions and appear to fill the remainder of the page but in other resolutions the user may need to scroll to see the entire page which is not what i want.

Lchad · #6 (**permalink**) Oct 27th, 2007, 22:27

Haven't look at the code but instead of the 420px suggestion that was made, how about a height of 80% or whatever gives you the perfect height? 88%???

dab42pat · #7 (**permalink**) Oct 27th, 2007, 23:01

it is looking unlikely that you can set the iframe height to 100% for firefox
ive been googling for about 1hr and I think the only way to do this is with javascript.

Marc · #8 (**permalink**) Oct 28th, 2007, 07:41

What you will need to do is set the body a width of 100%... Once you've done this, change the content area to suit.

Marc · #9 (**permalink**) Oct 28th, 2007, 07:45

After looking at your code and trying to make the iframes the proper size... It wouldnt work. Do you really need to use iframes?

Ill keep playing and get back to you.

Exodus · #10 (**permalink**) Oct 28th, 2007, 08:43

i dont really need to use frames but i do want to.

i think i should abandon using frames because everyone i ask seems to advise me to do that and they seem to be causing all the problems.

dab42pat · #11 (**permalink**) Oct 28th, 2007, 09:28

there is a javascript I found on the net.

HTML: Select all

<script language="JavaScript">
<!--
function resize_iframe()
{

    var height=window.innerWidth;//Firefox
    if (document.body.clientHeight)
    {
        height=document.body.clientHeight;//IE
    }
    //resize the iframe according to the size of the
    //window (all these should be on the same line)
    document.getElementById("glu").style.height=parseInt(height-document.getElementById("glu").offsetTop-8)+"px";
    
}

// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_iframe; 

//Instead of using this you can use: 
//    <BODY onresize="resize_iframe()">


//-->
</script>

add this to your iframe.

HTML: Select all

<iframe src="main.php" width="75%" height="100%" id="glu" onload="resize_iframe()"  scrolling="auto"></iframe>

It seems to work but only if you resize the window.
Maybe it can be tweaked by someone who knows about javascript.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to make a table height equal to the browser height ?	subhadip	Starting Out	4	Sep 20th, 2007 07:56
php header ( need help)	csun	PHP Forum	2	Mar 18th, 2007 23:46
Header Help	eulB	Graphics and 3D	5	Jun 12th, 2006 22:21
Please help, I need a new header(s)	mizbuffie	Graphics and 3D	2	May 22nd, 2006 04:04

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
100% height minus header