Sticky Footer

14 views
Skip to first unread message

Betsy

unread,
Oct 28, 2009, 7:21:23 AM10/28/09
to Object Oriented CSS
Hi
I read in another post about styling the <html> tag to create
a page background extending the full height of the browser window,

Might there be a way to create a sticky footer: a footer that always
stays at bottom of the browser window regardless of the size of the
page content
using OOCSS?

Thanks very much for any help!

Betsy
Message has been deleted

Murray Nuttall

unread,
Oct 28, 2009, 7:50:16 AM10/28/09
to object-or...@googlegroups.com
I removed my reply because I wasn't too sure if my suggestion would work however I think it might be worth mentioning it to see what happens...

You could use something like #footer{position: fixed; bottom: 0; height: 100px/*for example*/; width: 100%; background: red;} but you'll need to check out the IE6 fix here: http://ryanfait.com/position-fixed-ie6/ (or something like it). 

I'll be looking into this, for my own site, over the next week too.

m.

Betsy

unread,
Oct 28, 2009, 7:55:09 AM10/28/09
to Object Oriented CSS
Thanks! will check this out and report back..
Betsy

On Oct 28, 3:50 am, Murray Nuttall <murray.nutt...@gmail.com> wrote:
> I removed my reply because I wasn't too sure if my suggestion would work
> however I think it might be worth mentioning it to see what happens...
>
> You could use something like #footer{position: fixed; bottom: 0; height:
> 100px/*for example*/; width: 100%; background: red;} but you'll need to
> check out the IE6 fix here:http://ryanfait.com/position-fixed-ie6/(or
> something like it).
>
> I'll be looking into this, for my own site, over the next week too.
>
> m.
>
Message has been deleted

Arche Type

unread,
Oct 29, 2009, 1:56:15 PM10/29/09
to object-or...@googlegroups.com
You can do some computation about it using percentage.

On Wed, Oct 28, 2009 at 7:55 AM, Betsy <betsy....@gmail.com> wrote:

Thanks! will check this out and report back..
Betsy

On Oct 28, 3:50 am, Murray Nuttall <murray.nutt...@gmail.com> wrote:
> I removed my reply because I wasn't too sure if my suggestion would work
> however I think it might be worth mentioning it to see what happens...
>
> You could use something like #footer{position: fixed; bottom: 0; height:
> 100px/*for example*/; width: 100%; background: red;} but you'll need to
> check out the IE6 fix here:http://ryanfait.com/position-fixed-ie6/(or
> something like it).
>
> I'll be looking into this, for my own site, over the next week too.
>
> m.
>

Murray Nuttall

unread,
Dec 13, 2009, 10:00:25 PM12/13/09
to object-or...@googlegroups.com
Hi Betsy,
I have been working on something similar lately but attached to the top. After a little hunting around I figured out how to get it attached to the bottom in IE6+. Hope this example helps you a bit more.

Murray

On Thu, Oct 29, 2009 at 12:55 AM, Betsy <betsy....@gmail.com> wrote:

Thanks! will check this out and report back..
Betsy

On Oct 28, 3:50 am, Murray Nuttall <murray.nutt...@gmail.com> wrote:
> I removed my reply because I wasn't too sure if my suggestion would work
> however I think it might be worth mentioning it to see what happens...
>
> You could use something like #footer{position: fixed; bottom: 0; height:
> 100px/*for example*/; width: 100%; background: red;} but you'll need to
> check out the IE6 fix here:http://ryanfait.com/position-fixed-ie6/(or
> something like it).
>
> I'll be looking into this, for my own site, over the next week too.
>
> m.
>
> On Thu, Oct 29, 2009 at 12:21 AM, Betsy <betsy.van...@gmail.com> wrote:
>
> > Hi
> > I read in another post about styling the <html> tag to create
> > a page background extending the full height of the browser window,
>
> > Might there be a way to create a sticky footer: a footer that always
> > stays at bottom of the browser window regardless of the size of the
> > page content
> >  using OOCSS?
>
> > Thanks very much for any help!
>
> > Betsy
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To post to this group, send email to object-or...@googlegroups.com
To unsubscribe from this group, send email to object-oriented...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=en
-~----------~----~----~----~------~----~------~--~---


example.html

Dan Humphrey

unread,
Dec 14, 2009, 9:55:13 AM12/14/09
to object-or...@googlegroups.com
Betsy/Murray,

Just watch out for position: fixed on the iPhone, because it will behave like an absolutely positioned element when you scroll.

You can use media="only screen and (max-device-width: 480px)" to apply an alternate style for the footer.

Regards,

Dan



2009/12/14 Murray Nuttall <murray....@gmail.com>

--

You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To post to this group, send email to object-or...@googlegroups.com.
To unsubscribe from this group, send email to object-oriented...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=en.

MarcRic

unread,
Dec 14, 2009, 8:06:14 PM12/14/09
to Object Oriented CSS
Hi Folks,

Why did you use IDs instead of class names?

Since all the OOCSS is all class name based...

I get the same result with:

<style type="text/css">
body, html {margin: 0;padding: 0;}
.tkibar {
background: red;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}

.tkibar p {font-family: verdana, tahoma, sans-serif; font-size: 11px;
color: #222222; padding: 0 10px; margin: 0 0 9px;}
</style>

<!--[if lte IE 6]>
<style type="text/css">
.tkibar {
position: absolute; /* position fixed for ie6 */
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ? documentElement.scrollTop +
(documentElement.clientHeight-this.clientHeight) :
document.body.scrollTop +(document.body.clientHeight-
this.clientHeight));}
left: expression(0+((e=document.documentElement.scrollLeft)?
e:document.body.scrollLeft)+'px');
}
</style>
<![endif]-->

</head>
<body>
<div class="tkibar">
<p>Put whatever here...</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</
p>


??????????????

Regards.

On Dec 14, 12:55 pm, Dan Humphrey <danh2...@gmail.com> wrote:
> Betsy/Murray,
>
> Just watch out for position: fixed on the iPhone, because it will behave
> like an absolutely positioned element when you scroll.
>
> You can use media="only screen and (max-device-width: 480px)" to apply an
> alternate style for the footer.
>
> Regards,
>
> Dan
>
> 2009/12/14 Murray Nuttall <murray.nutt...@gmail.com>
>
> > Hi Betsy,
> > I have been working on something similar lately but attached to the top.
> > After a little hunting around I figured out how to get it attached to the
> > bottom in IE6+. Hope this example helps you a bit more.
>
> > Murray
>
> > On Thu, Oct 29, 2009 at 12:55 AM, Betsy <betsy.van...@gmail.com> wrote:
>
> >> Thanks! will check this out and report back..
> >> Betsy
>
> >> On Oct 28, 3:50 am, Murray Nuttall <murray.nutt...@gmail.com> wrote:
> >> > I removed my reply because I wasn't too sure if my suggestion would work
> >> > however I think it might be worth mentioning it to see what happens...
>
> >> > You could use something like #footer{position: fixed; bottom: 0; height:
> >> > 100px/*for example*/; width: 100%; background: red;} but you'll need to
> >> > check out the IE6 fix here:http://ryanfait.com/position-fixed-ie6/(or<http://ryanfait.com/position-fixed-ie6/%28or>
> >> > something like it).
>
> >> > I'll be looking into this, for my own site, over the next week too.
>
> >> > m.
>
> >> > On Thu, Oct 29, 2009 at 12:21 AM, Betsy <betsy.van...@gmail.com> wrote:
>
> >> > > Hi
> >> > > I read in another post about styling the <html> tag to create
> >> > > a page background extending the full height of the browser window,
>
> >> > > Might there be a way to create a sticky footer: a footer that always
> >> > > stays at bottom of the browser window regardless of the size of the
> >> > > page content
> >> > >  using OOCSS?
>
> >> > > Thanks very much for any help!
>
> >> > > Betsy
> >> --~--~---------~--~----~------------~-------~--~----~
> >> You received this message because you are subscribed to the Google Groups
> >> "Object Oriented CSS" group.
> >> To post to this group, send email to object-or...@googlegroups.com
> >> To unsubscribe from this group, send email to
> >> object-oriented...@googlegroups.com<object-oriented-css%2Bunsu...@googlegroups.com>
> >> For more options, visit this group at
> >>http://groups.google.com/group/object-oriented-css?hl=en
> >> -~----------~----~----~----~------~----~------~--~---
>
> >  --
> > You received this message because you are subscribed to the Google Groups
> > "Object Oriented CSS" group.
> > To post to this group, send email to object-or...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > object-oriented...@googlegroups.com<object-oriented-css%2Bunsu...@googlegroups.com>
> > .

Murray Nuttall

unread,
Dec 15, 2009, 2:23:47 PM12/15/09
to object-or...@googlegroups.com
My example, which is a simplified piece of project I am working on, uses unique ID names as this footer will be added to many different websites made by our company and third party companies. My priority is to ensure that the footer will not change style (particularly font) depending on what site it's applied to so I've opted for a really high specificity. 

The example isn't really geared toward oocss, I was just helping Betsy out with wanting to attach a footer to the bottom of the page, it can be done with class, ID, or just a tag (perhaps footer in html5).

m.

To unsubscribe from this group, send email to object-oriented...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages