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

Discussion in 'HTML' started by Vince C., Jun 27, 2003.

  1. Vince C.

    Vince C. Guest

    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.
    Vince C., Jun 27, 2003
    #1
    1. Advertising

  2. Vince C.

    Bagbourne Guest

    "Vince C." <> wrote in message
    news:3efc4060$0$1058$...
    > 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
    Bagbourne, Jun 28, 2003
    #2
    1. Advertising

  3. Vince C.

    Vince C. Guest

    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" <> a écrit dans le message de
    news:bdjkum$jch$...
    > "Vince C." <> wrote in message
    > news:3efc4060$0$1058$...

    [...]
    > Nige
    >
    >
    Vince C., Jun 30, 2003
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dan
    Replies:
    1
    Views:
    8,337
    ainigma
    Apr 4, 2008
  2. Noozer
    Replies:
    1
    Views:
    7,101
    Carolyn Marenger
    Mar 13, 2006
  3. Replies:
    0
    Views:
    493
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    176
    David Dorward
    Jun 1, 2005
  5. jenny wilkinson
    Replies:
    0
    Views:
    599
    jenny wilkinson
    Mar 20, 2013
Loading...

Share This Page