Liquid design: how do I set a DIV bottom to be no lower than the canvas?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Hi all,

I've read much about web design these days about liquid design. I'd like my
web content to adapt to the web browser, be it IE, Netscape, Opera or
whatever. But I'm not sure I'm following the right way. Please tell me:

I'd like to display a header  on my page but I'd like that header to remain
at the top of my page. Next I'd like to display the text content inside a
DIV that appear right below the header. I'd also like that DIV to have a
vertical scrollbar as soon as its bottom border reaches the bottom of the

All attempts I have made resulted in scrolling the whole document. I could
not get the DIV to have a scrollbar until I set its height or bottom using
non-percentage values. Theoretically percentages in heights are legal in
CSS2 and refer to the container.

I tried many combinations between absolute/relative/static positions,
hidden/auto overflow, height/bottom/top positions. I know MSIE doesn't fully
conform to CSS2 (e.g. clipping, percentages, fixed position; it might
explain why my attempts were unsuccessful).

So I'd like your opinion on weather my wish is compatible with liquid design
or not. If not, would you mind please pointing alternatives (note I expect
you'd say I'm focusing on controlling layout too much)? Otherwise could you
provide an example?

Here's the picture (watch out var. font):

| Header (fixed height)    |
| Body (variable height).  |
| Vertical scrollbar       |
| if height smaller than   |
| text height.             |
|                          |
+--------------------------+ <-- this border follows the
                                 bottom of the canvas

N.B.: Header has a fixed height using vertical padding against relative font
height hence no pixel nor percentage height.

Thanks a lot in advance.

Vince C.

Re: Liquid design: how do I set a DIV bottom to be no lower than the canvas?

Quoted text here. Click to load it

If you are prepared to have your header area a fixed pixel depth (not too
much of an imposition, surely?), then try this:

<div style="width:100%;height:100px;background-color:green">
<div style="height:100%;overflow:scroll">
<span style="width:100%;height:1000px;background-color:red">


Re: Liquid design: how do I set a DIV bottom to be no lower than the canvas?

Thanks, Nige.

I've forgotten to tell I want to use HTML 4.01 DOCTYPE declaration on my
page. If I type your text into such a page, the whole body gets scrolled
instead of the container DIV. I get the expected results until I add the
DOCTYPE declaration on top of the page.

Vince C.


Quoted text here. Click to load it

Site Timeline