Aligning content to the bottom of the viewport

[withrye]

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.

 

[Neredbojias]

To further the education of mankind, (e-mail address removed) 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.