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:
| foo |
| bar |
On 2007-06-12, 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:
>
>
>
> foo
>
>
> bar
>
>
>
> Is there a way to do this using div elements and CSS?
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.
...
bar
Ben C wrote:
> On 2007-06-12, 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:
>>
>>
>>
>> foo
>>
>>
>> bar
>>
>>
>>
>> Is there a way to do this using div elements and CSS?
>
> 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.
>
>
> ...
> bar
>
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?
On 2007-06-12, Eric C.
> Ben C wrote:
>> On 2007-06-12, 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:
>>>
>>>
>>>
>>> foo
>>>
>>>
>>> bar
>>>
>>>
>>>
>>> Is there a way to do this using div elements and CSS?
>>
>> 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.
>>
>>
>> ...
>> bar
>>
>
> 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.
In article
Ben C
> On 2007-06-12, Eric C.
> > Ben C wrote:
> >> On 2007-06-12, 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:
> >>>
> >>>
> >>>
> >>> foo
> >>>
> >>>
> >>> bar
> >>>
> >>>
> >>>
> >>> Is there a way to do this using div elements and CSS?
> >>
> >>
> >> ...
> >> bar
> >>
> >
> > 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. 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.
--
dorayme
On 2007-06-12, dorayme
> In article
> Ben C
>
>> On 2007-06-12, Eric C.
>> > Ben C wrote:
>> >> On 2007-06-12, 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:
>> >>>
>> >>>
>> >>>
>> >>> foo
>> >>>
>> >>>
>> >>> bar
>> >>>
>> >>>
>> >>>
>> >>> Is there a way to do this using div elements and CSS?
>> >>
>
>> >>
>> >> ...
>> >> bar
>> >>
>> >
>> > 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.
....
blah blah
In article
Ben C
> On 2007-06-12, dorayme
> > 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.
>
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.
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
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.)
--
dorayme
On 2007-06-13, dorayme
> In article
[...]
>
> 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
>
>
>
> over a larger range of browser window and text settings.
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.
Good policy.
> I don't know if this is a tad unprofessional or not?
Footers that find their way to the bottom of big empty pages look all
right I suppose.