|
|
Posted by Ben C on 06/13/07 07:32
On 2007-06-12, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> In article <slrnf6tmnn.s94.spamspam@bowser.marioworld>,
> Ben C <spamspam@spam.eggs> wrote:
>
>> On 2007-06-12, Eric C. <eric@notarealaddy.com> wrote:
>> > Ben C wrote:
>> >> On 2007-06-12, Eric C. <eric@notarealaddy.com> wrote:
>> >>> 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?
>> >>
>
>> >> <body>
>> >> ...
>> >> <div style="position: absolute; bottom: 0">bar</div>
>> >> </body>
>> >
>> > 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.
>>
>> You can position the footer relative to body rather than relative to the
>> viewport. To do that just make body position: relative.
>
> Well, well... how about that! Be nice if this would work with a
> proper doctype.
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.
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>
Navigation:
[Reply to this message]
|