[thelist] how to reach this effect by CSS

Zhang Weiwu zhangweiwu at realss.com
Fri Dec 23 07:31:36 CST 2005

Hello. Sorry for such stupid email subject but my problem is a bit difficult
to explain and my English isn't that good to pick up a good subject.

It is like this: there are 3 blocks in my webpage, the page header always
stays at the top, the middle section has the content and the page footer
follows. I did it using very simple structure, 3 <div> elements.

However this page is given a lot of artwork making it look like a frame
(frame by means of art not by means of <frame> element) and it will be very
ugly if there are spaces below the last <div> element.

My page is okay when the middle section (content area) has a lot of text and
the page foot is pushed down that you need to scroll down to see it, but it
is very ugly when the middle section is only one or two lines and the last
section hang on the middle part of the browser window, exposing a lot of
space after the pagefoot. It is much nicer if in this case the space are
between middle section and page foot.

I hope I am clear on my question. The only idea I can think of is to write a
javascript that window.onload and window.onresize activate it so that it
calculate the height in the browser window, minus the height of page head
and page foot, and if the middle section height is less then remaining
space, make middle section as tall as the remaining space. Isn't there a CSS
way to do it?

quick reference showing current behavior:

1) long article (looks just fine):

2) short article (ugly spacing at the bottom):

3) alternative design (this one works but I think (1) is much better)

(to those who find this email by google: these links will all look fine and
looks the same because I must have solved this by then)

Zhang Weiwu   Real Softservice
International business: http://www.realss.com
International sales:    0086 10 84606011
Inland business:        http://www.realss.cn
Inland sales call:      0086 592 2099987

More information about the thelist mailing list