Aligning content to the bottom of the viewport

Discussion in 'HTML' started by withrye@gmail.com, May 27, 2006.

  1. Guest

    I wanted a different layout for my site redesign and considered having
    my entries align to the bottom of the screen rather than to the top. It
    seemed simple enough. I defined a div and positioned it with a nice
    bottom:0px. The relevant code:

    ..entry {
    position: absolute;
    bottom: 0px;}

    Then I resized to check how well the layout breaks when subjected to
    different resolutions. That's when I discovered that when the height of
    the div exceeds the height of the browser window, the top part of the
    div simply disappears. There are no scrollbars to allow access either.
    Uh oh time.

    I know I can both align the contents to the bottom of the screen AND
    have scrollbars when the div overflows if I use a table cell with
    valign="bottom". I don't know how to do this with CSS at all.

    Here is my site:
    three.fsphost.com/saladday.
    If you resize the browser window, you can see the problem.

    Thank you for any replies.
     
    , May 27, 2006
    #1
    1. Advertising

  2. Neredbojias Guest

    To further the education of mankind, vouchsafed:

    > I wanted a different layout for my site redesign and considered having
    > my entries align to the bottom of the screen rather than to the top. It
    > seemed simple enough. I defined a div and positioned it with a nice
    > bottom:0px. The relevant code:
    >
    > .entry {
    > position: absolute;
    > bottom: 0px;}
    >
    > Then I resized to check how well the layout breaks when subjected to
    > different resolutions. That's when I discovered that when the height of
    > the div exceeds the height of the browser window, the top part of the
    > div simply disappears. There are no scrollbars to allow access either.
    > Uh oh time.
    >
    > I know I can both align the contents to the bottom of the screen AND
    > have scrollbars when the div overflows if I use a table cell with
    > valign="bottom". I don't know how to do this with CSS at all.
    >
    > Here is my site:
    > three.fsphost.com/saladday.
    > If you resize the browser window, you can see the problem.


    Your url's screwed up.

    There was a question similar to this in ciwah or ciwas, although that OP
    was concerned about aligning plentiful content to the bottom and getting no
    scrollbar.

    In short, you can't do it with just css. What can be done is to position
    top, put a reference marker at the bottom/last entry of the container body
    and call the page with said reference hashed. However, with content that
    does not extend at least to the full height of the container, the last
    entry will not be at the bottom, either.

    --
    Neredbojias
    Infinity has its limits.
     
    Neredbojias, May 28, 2006
    #2
    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,392
    ainigma
    Apr 4, 2008
  2. Noozer
    Replies:
    1
    Views:
    7,202
    Carolyn Marenger
    Mar 13, 2006
  3. Chris
    Replies:
    2
    Views:
    11,716
    Bergamot
    Sep 28, 2006
  4. Cuthbert
    Replies:
    8
    Views:
    445
    Ancient_Hacker
    Sep 13, 2006
  5. Replies:
    1
    Views:
    390
    Beauregard T. Shagnasty
    Apr 19, 2007
Loading...

Share This Page