100% div height 1

guitardave78 · Nov 2, 2004

Ok then. Check out

http://www.fuzzyd.co.uk

in internet explorer
If you change the page height the header and footer never resize, only the main text. I did this with tables.

Now i am rewriting it for other browsers (!) and am trying to acheive the same effect with just layers

the page is layed out thus

<div id="wrapper">
<div id="header"></div>
<div id="heading"></div>
<div id="body"></div>
<div id="menu"></div>
<div id="footer"></div>
</div>

I got the layout fine, but just cant get it to only reduce the size of the body div. Any ideas?

chessbot · Nov 2, 2004

Maybe set height for each of the elements but use min-height for the body?

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series

guitardave78 · Nov 2, 2004

min height does not work with ie sadly. I already have min height for moz based

Vragabond · Nov 3, 2004

You can employ a IE only hack:

Code:

* html #myelement {
  height: 100%;
}

because IE handles height the same way other browsers handle min-height.

guitardave78 · Nov 3, 2004

Doesnt do the job I am affraid.

guitardave78 · Nov 4, 2004

Ok i will rephrase this.
is there a way to make
<div id="menu"></div>
<div id="footer"></div>

"push" the body layer so it gets smaller.
Setting it to 100% it ignores everything and just disapears off the bottom of the page

Set it to 60 % is also no use as the menu still vanishes.
Help!!!

cLFlaVA · Nov 4, 2004

Have you tried applying the following css:

Code:

#menu, #footer {
   clear: both;
}

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

guitardave78 · Nov 4, 2004

seems to have no effect

I can get the menu and footer following the bottom of the page, but the body div just sits there!!

cLFlaVA · Nov 4, 2004

Well, it's really kind of hard to offer any more help without some visual aid. Like, what does your actual page look like? Do you have a link to show us? If not, could you post your actual code? Then we'll be able to help better

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

guitardave78 · Nov 4, 2004

check the link at the top of the first post. That is how it should all work

goto

http://www.fuzzyd.co.uk/test/

for what i am working on
(only index linked)

cLFlaVA · Nov 4, 2004

Sorry, I'm an idiot. Will get back to you.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

cLFlaVA · Nov 4, 2004

Ok, here is my suggestion to you.

As we all know, height: 100% means nothing in CSS unless the height of the object's parent element is explicitly set. Therefore, we need to use some scripting to change the height of a div whenever the page loads and resized. Here is my proposal:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<title>new document</title>

<script language="javascript">
<!--

function changeDivHeight() {
    var t = document.getElementById('bodycontent').offsetTop;
    var b = document.body.scrollHeight - document.getElementById('footer').offsetTop;
    var h = document.documentElement.clientHeight - (t + b);
    document.getElementById('bodycontent').style.height = h + "px";
}

onload = changeDivHeight;
onresize = changeDivHeight;
-->
</script>

<style type="text/css">
body {
	margin: 0;
	text-align: center;
	}

#wrapper {
	margin: 0 auto;
	width: 500px;
	border: 1px solid gray;
	}

#header {
	width: 100%;
	height: 100px;
	background-color: #FF6633;
	border-bottom: 3px solid gray;
	}

#bodycontent {
	width: 100%;
	overflow: auto;
	}

#footer {
	width: 100%;
	height: 80px;
	background-color: #99CC99;
	border-top: 3px solid gray;
	clear: both;
	}
</style>

</head>

<body>
<div id="wrapper">
	<div id="header"></div>
	<div id="bodycontent">
	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 	
	</div>
	<div id="footer"></div>
</div>

</body>

</html>

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

cLFlaVA · Nov 4, 2004

That currently works in FireFox 1.0 PR. If this solution is acceptable, let me know and I'll work on making it more x-browser friendly.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

cLFlaVA · Nov 4, 2004

Ahh, it also works in IE 6.0.2800 and Netscape 7.2.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

guitardave78 · Nov 4, 2004

I will test it 2moro. I have to admit though there must be a way to do it without script lol!!

Thanks for the help so far!!

cLFlaVA · Nov 4, 2004

Sorry...

The height of an object must be set explicitly. If it's set relatively (%) then its parent object's height must be set explicitly. If you get to the very top element before the <body> tag, you'll need to set the height of it explicitly, since it's different for each user.

JavaScript provides you with a way to do that.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

guitardave78 · Nov 5, 2004

Got it

Code:

function changeDivHeight() {
    var t = document.getElementById('bodycontent').offsetTop;
    var b = document.body.scrollHeight - document.getElementById('menu').offsetTop;
    var h = document.documentElement.clientHeight - (t + b);
	if (h<0){
	var h = document.body.clientHeight - (t + b);
	}
    document.getElementById('bodycontent').style.height = h-10 + "px";

}

Thanks!!
IS this better than tables or not?

cLFlaVA · Nov 5, 2004

Well, you'll get different answers depending on who you ask. Six years ago I taught myself HTML. I was a table-layout guy. Then, a few months ago, a friend of mine alerted me of the reaility that was ensuing - the desire to use tableless layouts. It's really the next step in web design - and cuts down on your page size dramatically.

So, to me, yes, it's better than tables.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

guitardave78 · Nov 5, 2004

lol. Same sort of story. Learned about 5 years ago, now trying to do the tableless thing!.
Just hate using javascript for lay out!!
Works though so hey
Thanks.

stasJohn · Jan 13, 2005

I realize this post is old, but perhaps someone will find this useful. To achieve the effect, try an IE conditional comment.

heres some code to demonstrate...

page.html

Code:

<html>
<head>
...
<styel ...>
  body { height:100%; }
  container { min-height:100%; }
</style>
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css"/><![endif]-->	
</head>
<body>
...
</body>
</html>

ie.css

Code:

container { height:100%; }

The conditional comment is an IE proprietary thing, so all other browsers will ignore it. This comes in handy too if you don't want to fill your valid stylesheet with ugly css hacks to fix IE's box model issue or other IE bugs. A good explanation of IE conditional comments can be found at [URL unfurl="true"]http://www.quirksmode.org/css/condcom.html[/url]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

100% div height 1

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor