Displaying content at the bottom of the browser

E

Eric C.

Hello

In the old days, in quirks mode, it was possible to get content to
appear at the bottom of the browser window by doing this:

<table width="100%" height="100%">
<tr valign="top">
<td>foo</td>
</tr>
<tr valign="bottom">
<td>bar</td>
</tr>
</table>

Is there a way to do this using div elements and CSS?
 
B

Ben C

Hello

In the old days, in quirks mode, it was possible to get content to
appear at the bottom of the browser window by doing this:

<table width="100%" height="100%">
<tr valign="top">
<td>foo</td>
</tr>
<tr valign="bottom">
<td>bar</td>
</tr>
</table>

Is there a way to do this using div elements and CSS?
Click to expand...

Use position: absolute in conjunction with bottom: 0 on a box near the
top of the document tree (so that the viewport is its containing block).

e.g.

<body>
...
<div style="position: absolute; bottom: 0">bar</div>
</body>
 
E

Eric C.

Ben said:
Use position: absolute in conjunction with bottom: 0 on a box near the
top of the document tree (so that the viewport is its containing block).

e.g.

<body>
...
<div style="position: absolute; bottom: 0">bar</div>
</body>
Click to expand...

Thanks for answering. The only problem with this method is that the div
does not move down if the content above happens to exceed the height of
the viewport.

Is there a way to exactly mimic the behaviour of the table method?
 
B

Ben C

Thanks for answering. The only problem with this method is that the div
does not move down if the content above happens to exceed the height of
the viewport.
Click to expand...

You can position the footer relative to body rather than relative to the
viewport. To do that just make body position: relative.
 
D

dorayme

Ben C said:
You can position the footer relative to body rather than relative to the
viewport. To do that just make body position: relative.
Click to expand...

Well, well... how about that! Be nice if this would work with a
proper doctype. What is the _simplest_ mark up anyone has come up
with to place footers at the bottom without the obvious pitfalls?
I have not bothered after initial problems and just make footers
appear underneath the rest of the show, no matter where this rest
finishes.
 
B

Ben C

Well, well... how about that! Be nice if this would work with a
proper doctype.
Click to expand...

It works OK in Firefox for me with the HTML strict doctype. But it still
isn't a very good solution. It does position the footer over the top of
the bottom of the body, but it would be better to have the footer after
the body's content, not on top of it, and I suspect the OP wants the
footer at the bottom of the viewport instead if the body's content is
shorter than the viewport.

The table, which isn't quirky any more if you replace height="100%" with
style="height: 100%" effectively sets a minimum height since tables
don't get overflowed, and also gets the footer placed after the first
row in a sensible way instead of being just planted on top of it. If
the stuff in the first row is longer than the viewport then the footer
is underneath it and you scroll to it. If it's shorter than the viewport
then the table stretches to fit the viewport and the footer goes at the
bottom.

You might need to add html, body { height: 100% } to get the height:
100% to work on the table.
What is the _simplest_ mark up anyone has come up with to place
footers at the bottom without the obvious pitfalls? I have not
bothered after initial problems and just make footers appear
underneath the rest of the show, no matter where this rest finishes.
Click to expand...

Well I think you need the table really, unless min-height is available
and you know the height of the footer in advance.

But I'm sure I've heard that min-height doesn't work on IE.

Browsers don't seem to get this right if you set min-height directly on
body, but if you put another div inside it it's OK.

I'm using an extra div at the bottom of content for the footer to sit on
top of so that the footer doesn't overlay the last couple of lines of
content. Purists could use :before to insert that div since it has no
meaning other than for layout.

You can paste more words in where I've just put "blah blah" to see how
it works for longer content.

<style type="text/css">
html, body { height: 100% }
body { margin: 0; }

#content
{
min-height: 100%;
position: relative;
background-color: lavender;
position: relative;
}
#footer
{
position: absolute;
bottom: 0;
height: 2em;
width: 100%;
background-color: red;
}
</style>

....

<body>
<div id="content">
blah blah
<div style="height: 2em"></div>
<div id="footer">
Footer
</div>
</div>
</body>
 
D

dorayme

Ben C said:
Well I think you need the table really, unless min-height is available
and you know the height of the footer in advance.

But I'm sure I've heard that min-height doesn't work on IE.
Click to expand...

Not on IE 6 or less at least.
Browsers don't seem to get this right if you set min-height directly on
body, but if you put another div inside it it's OK.

I'm using an extra div at the bottom of content for the footer to sit on
top of so that the footer doesn't overlay the last couple of lines of
content. Purists could use :before to insert that div since it has no
meaning other than for layout.

You can paste more words in where I've just put "blah blah" to see how
it works for longer content.
Click to expand...

Interesting. I have a little page that I test footers on at:

http://tinyurl.com/3bntgw

and it has (now), barring a few minor stylistic changes, your
idea. Curiously I found that 3em worked better in your

<div style="height: 3em"></div>

over a larger range of browser window and text settings.

Now, of course, this is in my Mac browsers. Of course, it does
not work in Mac IE 5 and without testing it neither the elephant
(getting smaller every day): Windows IE 6. Other provisions and
clauses needed to cater for these recalcitrants!

(I still sort of like my policy of just putting footers after the
rest and centering and not bothering about it being at the bottom
of the view window, and therefore no need to position anything
really. I don't know if this is a tad unprofessional or not?
Anyway, I like to explore this bottom of the viewport every now
and then and see if there is some easy to remember code to make
it all work cross browser well enough, including hacks,
conditionals etc.)
 
B

Ben C

Interesting. I have a little page that I test footers on at:

http://tinyurl.com/3bntgw

and it has (now), barring a few minor stylistic changes, your
idea. Curiously I found that 3em worked better in your

<div style="height: 3em"></div>

over a larger range of browser window and text settings.
Click to expand...

You've changed (I think) #footer so it's now got padding-bottom: 2em
instead of height: 2em which I think is what I had. So 3em would be
about right for one line of text and 2ems of padding. To be on the safe
side better to set the height of #footer to 3em as well, or to exactly
what the height of the dummy div at the bottom is set to.

And also to be on the safe side explicitly set padding-bottom: 0 on
#content since the footer is positioned relative to the inside border
edge not to the inside padding edge.
Now, of course, this is in my Mac browsers. Of course, it does
not work in Mac IE 5 and without testing it neither the elephant
(getting smaller every day): Windows IE 6. Other provisions and
clauses needed to cater for these recalcitrants!

(I still sort of like my policy of just putting footers after the
rest and centering and not bothering about it being at the bottom
of the view window, and therefore no need to position anything
really.
Click to expand...

Good policy.
I don't know if this is a tad unprofessional or not?
Click to expand...

Footers that find their way to the bottom of big empty pages look all
right I suppose.
Click to expand...
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Image shifts to the right when export the page to pdf 4
How to wrap <td> content . 16
Footer and bottom of the page. 1
Sort by number of characters 1
SendGrid email issue in responsive Gmail 1
Nested Loop Insert Page Break 1

Members online

No members online now.
Total: 29 (members: 1, guests: 28)
Robots: 447

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,051
Latest member
CarleyMcCr

Latest Threads

Top