Sat, 2004-01-03 14:22
I am trying to make a site that has a header div at the top and a scrollable content div taking up the rest of the viewport underneath. The problem I have is the height of the content div. I just want it to work in IE, I can get it working in other browsers by using bottom:0 and/or position: fixed but neither of these are supported in IE!
The closest I have got is by using 100% as the height of the content div but this is interpreted as 100% of the viewport not 100% of the remaining space so the content div goes off the bottom. I have searched countless forums for an answer with no luck. I can position it correctly if the header is a fixed height but i want to allow for people changing the text size. I don't want to use javascript.
---------------------
| | Variable height
|-------------------|
| |
| | Remaining viewport height
|______________|
Any help would be appreciated
Sat, 2004-01-03 21:03
#1
Variable header size
If header is say 10% then content must be 90% not 100%
A couple of links you will find useful
http://www.cookiecrook.com/bugtests/fixed.htm which contains a FIXED hack and another link at bottom to an explanation of the hack.
http://www.svendtofte.com/code/max_width_in_ie/ which contains both min and max width and HEIGHT hacks for IE
Regards
Day
Sat, 2004-01-03 21:09
#2
Variable header size
yeah i've looked at a lot of pages using that kind of thing. The problem is for those methods you need to know the height of the header (%, px or whatever). My header contains text which means if the user increases the font size on their browser the header will grow and mess up the page. I need a method of making a div fill the remaining space in the viewport.