7 replies [Last post]
nant15
Offline
newbie
Last seen: 15 years 35 weeks ago
Timezone: GMT+7
Joined: 2006-12-07
Posts: 4
Points: 0

I have been searching for 100% height divs for days but i can't find a solution to my problem. (Which I could be able to solve it by using tables and quirks mode Tongue within 10 minutes) What I have found so far is make a div initially fill the height of browser and expand later. Which is not what i wanted. I wanted a div that magically fills its parent.

Well, what i wanted to do is...

Top (50px height)
Main Content


some content (fixed height)


another content (fill the remaining height and show scroll bar if content is overflowed vertically)



footer

or like this in the table form


Top









content

this might not clear, but it is very similar to MSDN. However, MSDN use Frame and does not have footer.

It's might looks weird as a website, but this one is Web Application Project. The content on Top and Footer is critical to the user and must be shown at all times.

Can I really do something like that using just CSS alone? I'm trying to move to CSS layout but it seems to cause me too many problem. This will be my 4th attempt to it Tongue Can someone help?

Thanks in advance!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Yes, its real easy in CSS.

Yes, its real easy in CSS. It can be done in several different ways. Unfortunately there is still one browser out there that doesn't support CSS2 yet, it just happens to have 90% of the market.

Take a look at this layout. Its not exactly what you want, but I think its close and it should show the techniques required for what you do want.

nant15
Offline
newbie
Last seen: 15 years 35 weeks ago
Timezone: GMT+7
Joined: 2006-12-07
Posts: 4
Points: 0

WOW!!!

Thanks a lot, I have been trying to do this for a long time!

and

have to fallback to tables Tongue

nant15
Offline
newbie
Last seen: 15 years 35 weeks ago
Timezone: GMT+7
Joined: 2006-12-07
Posts: 4
Points: 0

Well, it's seems that i have to think differently

As i have seen the layout using inspector, It's completely reverse way of thinking about layout Tongue

What I have in my head is that things have to "flow" to form the layout. In this example layout, it's like Floating things around Laughing out loud and use padding to create the sense of having content in the middle!

Very Interesting!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Its only like that to

Its only like that to overcome IE's issues with CSS2.
- IE doesn't support position:fixed
- IE can't handle opposite offsets at the same time
- IE doesn't support display: table-cell

That only leaves putting IE into quirks mode to trigger its border-box-model and gaining the ability to use padding inside the 100% dimension specification.

nant15
Offline
newbie
Last seen: 15 years 35 weeks ago
Timezone: GMT+7
Joined: 2006-12-07
Posts: 4
Points: 0

Quirks mode...

Ahh...I just tried to create my layout..It won't work without quirks mode.

Which means i can't use :hover :S and controls that i have created will break.

I have spent too much time on this and will have to fall back to table now...

Centauri
Offline
Regular
Newcastle NSW Australia
Last seen: 15 years 18 weeks ago
Newcastle NSW Australia
Timezone: GMT+11
Joined: 2006-12-07
Posts: 35
Points: 0

Check out some of Stu

Check out some of Stu Nicholls' layouts http://www.cssplay.co.uk/layouts/index.html

Cheers
Graeme

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

They are basically the same

They are basically the same - and as such also rely on placing IE into quirks mode.