Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Liquid design: how do I set a DIV bottom to be no lower than the canvas?

Reply
Thread Tools

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

 
 
Vince C.
Guest
Posts: n/a
 
      06-27-2003
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
canvas.

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.


 
Reply With Quote
 
 
 
 
Bagbourne
Guest
Posts: n/a
 
      06-28-2003
"Vince C." <(E-Mail Removed)> wrote in message
news:3efc4060$0$1058$(E-Mail Removed). be...
> 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
> canvas.


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

<html>
<head>
</head>
<body>
<div style="width:100%;height:100px;background-color:green">
header1<br>
header2<br>
header3
</div>
<div
style="position:absolute;top:0px;padding-top:100px;width:100%;height:100%">
<div style="height:100%;overflow:scroll">
<span style="width:100%;height:1000px;background-color:red">
Contents......................
</span>
</div>
</div>
</body>
</html>

Nige


 
Reply With Quote
 
 
 
 
Vince C.
Guest
Posts: n/a
 
      06-30-2003
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.

------

"Bagbourne" <(E-Mail Removed)> a écrit dans le message de
news:bdjkum$jch$(E-Mail Removed)...
> "Vince C." <(E-Mail Removed)> wrote in message
> news:3efc4060$0$1058$(E-Mail Removed). be...

[...]
> Nige
>
>



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Liquid Technologies Unvei Liquid XML Studio 2013 jenny wilkinson XML 0 03-20-2013 07:55 AM
css "div" bottom of window or bottom of content. Dan HTML 1 04-04-2008 09:40 AM
Liquid Technologies Announces Availability of Liquid XML 2008 (v6.1) announcements@liquid-technologies.com XML 0 01-17-2008 02:07 PM
CSS to put text at bottom of browser window, or page bottom, whichever is lower? Noozer HTML 1 03-13-2006 10:35 AM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM



Advertisments