Bottom-filler DIV

Discussion in 'HTML' started by Andrey Tarasevich, Aug 26, 2007.

  1. Hello

    I'm trying to solve the following problem and would appreciate any help. I'd
    like to add a bottom-aligned navigation bar (NB) to my web page. That bar has
    fixed height and is supposed to possess the following properties:

    1) if the main content of the page is shorter than the viewport height, then the
    NB is "glued" to the bottom of the viewport (no scroll necessary). In this case
    there might be a gap between the content and the NB.

    2) if the main content of the page is taller than the viewport, then the NB gets
    "pushed out" of the page (i.e. it becomes glued to the bottom of the main
    content). The vscroll appears and if I scroll down to the bottom of the man
    content I'll find the NB there. In this case there is no gap between the content
    and the NB.

    The question is: how can I achieve this?

    The first thing that comes to mind in order to align the NB with the bottom of
    the viewport is the widely-known 'position: absolute; bottom: 0' combination. It
    will indeed take care of the alignment, but unfortunately it will also make the
    NB to stay visible at all times and overlap the main content, when the latter is
    long (or when the viewport is short).

    I think I could probably solve the problem with some kind of 2-DIV
    horizontal-split layout. The top DIV is supposed to hold the main content (and
    have automatic height, i.e. its height is defined by the content), while the
    bottom DIV is supposed to fill the remaining space from the bottom of the first
    DIV to the bottom of the viewport. Then I can assign a fixed min-height to the
    bottom DIV and absolutely position the NB inside that DIV. Done. Now, can anyone
    please tell me how (if it's at all possible) to set up such a bottom-filler DIV?
    Once again, it is supposed to be a 100% width DIV, which automatically fills all
    remaining space at the bottom of the current viewport.

    Of course, there might be other ways to implement the original intent with a NB.
    Alternative ideas are greatly appreciated.

    Thank you in advance

    P.S. It looks like I can easily implement the desired layout using a
    1-column-2-rows table with 'height: 100%'. Just give the bottom cell a fixed
    height and use the top cell for the main content. In case of a table 'height:
    100%' works more like a min-height, meaning that if the main content is long the
    table will automatically stretch vertically, overriding the explicit 'height:
    100%' setting. This is not the case with DIVs. So, once again, is there a way to
    achieve something like this without a table?

    --
    Best regards,
    Andrey
    Andrey Tarasevich, Aug 26, 2007
    #1
    1. Advertising

  2. Andrey Tarasevich

    dorayme Guest

    In article <>,
    Andrey Tarasevich <> wrote:

    > Hello
    >
    > I'm trying to solve the following problem and would appreciate any help. I'd
    > like to add a bottom-aligned navigation bar (NB) to my web page. That bar has
    > fixed height and is supposed to possess the following properties:
    >


    There is a current thread going on this very topic: Footer, the
    Beast and an interesting one. Look it up, in Google if need be.

    --
    dorayme
    dorayme, Aug 26, 2007
    #2
    1. Advertising

  3. dorayme wrote:
    >>
    >> I'm trying to solve the following problem and would appreciate any help. I'd
    >> like to add a bottom-aligned navigation bar (NB) to my web page. That bar has
    >> fixed height and is supposed to possess the following properties:
    >>

    >
    > There is a current thread going on this very topic: Footer, the
    > Beast and an interesting one. Look it up, in Google if need be.
    >


    Thanks. That's exactly what I need. And it actually works :)
    Andrey Tarasevich, Aug 26, 2007
    #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. Serial # 19781010
    Replies:
    1
    Views:
    502
    William Tasso
    Aug 10, 2003
  2. Dan
    Replies:
    1
    Views:
    8,345
    ainigma
    Apr 4, 2008
  3. Chris
    Replies:
    2
    Views:
    11,671
    Bergamot
    Sep 28, 2006
  4. Form Filler

    , Feb 14, 2006, in forum: Ruby
    Replies:
    6
    Views:
    114
  5. Royan
    Replies:
    4
    Views:
    148
Loading...

Share This Page