2 replies [Last post]
DiD
Offline
newbie
Last seen: 17 years 18 weeks ago
Joined: 2004-01-03
Posts: 2
Points: 0

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

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 26 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

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

The only way to learn is to do it yourself

DiD
Offline
newbie
Last seen: 17 years 18 weeks ago
Joined: 2004-01-03
Posts: 2
Points: 0

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.