2

I need to have a fixed footer, so if page only have a few lines, the footer will be at the bottom or if the page is large, then the footer will be after the page content.

All samples I've tried out there fails, because I need to fill som elements using ajax (async) and then the footer gets messed up.

Any fixed footer that works rock solid?

:) Thanks!

Amberlamps
  • 39,180
  • 5
  • 43
  • 53
MojoDK
  • 4,410
  • 10
  • 42
  • 80
  • So are you trying to create a footer that docks on the bottom of the browser window, when the content doesn't fill the viewport, but if the content was taller than the height of the viewport you'd have to scroll to the bottom to see the footer? Ideally continuing to work with dynamically generated content in the document body? – Mark At Ramp51 Jun 04 '12 at 12:26
  • First, just to check if you've seen http://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly - I'd be interested to know if the accepted answer works with dynamically added content. – andyb Jun 04 '12 at 12:30
  • http://ryanfait.com/sticky-footer/ .... should work fine regardless of ajax updates to page content. – Tom Jun 04 '12 at 12:41

3 Answers3

1

I'll go with captain obvious, but what about min-height: for the container and put percentages there?
Normally it would solve both problems - when there's just a little of the content and when there's a lot.

Could you also post some of the code?

IgnasK
  • 384
  • 2
  • 19
0

I'm not sure if I understand exaclty what your looking for, but what about something like this?

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

Demo

Fahim Parkar
  • 30,974
  • 45
  • 160
  • 276
Brad
  • 198
  • 10
-1

This works perfectly, just follow the instructions provided here.

Fahim Parkar
  • 30,974
  • 45
  • 160
  • 276
mukund
  • 2,866
  • 5
  • 31
  • 41