Topic: 100% Height Problem (I know, I searched first) (Page 1 of 1)

I know this has been talked and takled about and beat to death, I read all the stuff search found and also tons of websites.

What I have concluded is that when you have a containing div set to 100%, if the content divs inside it go past it..well it ignores that, since it is basic 100% on the viewport..

So If I wanted a footer to go below my main 100% height div and also move down with my content..well, I can't without using javascript or some other crappy method.

Is this correct? If not can you tell me how this might be done.

Thanks in advance.

EDIT:

Forgot, if you need an example of what I am doing, not that you should sicne I know this is a common problem..but here is my Site WIP:
http://shifter.ensellitis.com/index.php

The red border you see (just for show) is the Main Div that is set to 100% and you can see when the NAV or CONTENT divs go past..the main div ignores them.

(Edited by Shifter on 02-01-2005 05:48)

check the examples here:

http://disk919.com/bb2/www/height/

in a nutshell, use a background image to create the illusion

I don't quite understand what you are telling me to do...gonna look at your examples some more..but I didn't quite understand...

Background image to create the illusion of what?

quote:

---

So If I wanted a footer to go below my main 100% height div and also move down with my content..well, I can't without using javascript or some other crappy method.

Is this correct? If not can you tell me how this might be done.

---

No. Er...well....I don't understand the question.

If you want something to have a height of 100%, that excludes anything from bein gbelow it....right? What you should probably be looking at is putting the footer inside the 100% height div...at the bottom.

Now, your content can most certainly exceed the viewport.

In different browsers you will run into some minor problems in doing this, but if it were not possible there'd be a whole lot of sites out there not working

See this discussion at the Gurus Network - http://www.gurusnetwork.com/discussion/thread/2907/
For ways to work around the problems that will come up.

[Previous message erased]



Okay, I have got it to work (as far as I know..so far.

The last thing I can't figure out, in IE it works perfect (oxymoron?) but in FF there is a small area near the bottom that doesnt complete the extend )..in Opera it has the content div (that extents the container) cut off in the same place where the space begins in IE..and in NN its the same as FF.

As seen here:

Http://shifter.ensellitis.com/test2/


Thanks for all the help everyone..just about seem to have it now. Cept that one thing..

(Edited by Shifter on 02-01-2005 17:36)

(Edited by Shifter on 02-01-2005 17:43)

Alrighty, sorry to post so much in my own topic.. :P

I kept messing with it..added a clear div after my content and then put the footer..and now it's working right..

Thanks for the help.

Edit:

Okay I thought it was working right..but in Opera..when I click a lick the content div is moved below other divs and centered..can't figure out why..

Edit again;

Hehe, Okay I found the hack to fix that problem..only problem left now is the content div is cutting short or not as big as should be) in Opera..

Hopfully can fix that as well..if anyone knows how..lemme know (assuming I dont find it first.)

I know it has to do with margins in that div..if I remove margins and padding then everything looks right (cept I need a left margin or padded area so words arent next to the edge)...I tried using the Voice-family hack and the body>html hack for Opera but it never works right..

(Edited by Shifter on 02-01-2005 20:36)

(Edited by Shifter on 02-01-2005 21:20)