• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

CSS page footer layout issue

 
Ranch Hand
Posts: 10198
3
Mac PPC Eclipse IDE Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I'm a bit confused and have been fiddling around with getting my footer element stick to the bottom and push downwards automatically based on the content in the body. Take a look the the screenshots below. The footer element actually shoots up when there is no enough content in the body. Here is the CSS that I have for the body:





Is there a way for me to say that the footer has to take a certain height from the bottom of the page and not actually depend on the size and content of the body element? Here is my complete HTML:



Screen-Shot-2014-01-01-at-10.31.44-PM.png
[Thumbnail for Screen-Shot-2014-01-01-at-10.31.44-PM.png]
 
Joe San
Ranch Hand
Posts: 10198
3
Mac PPC Eclipse IDE Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Here is another page where there is not enough body content and the footer shoots up!
Screen-Shot-2014-01-01-at-10.31.02-PM.png
[Thumbnail for Screen-Shot-2014-01-01-at-10.31.02-PM.png]
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You can give the "wrap" element a min-height, if you like.

Personally, I don't like a lot of excess white-space, so I see nothing wrong with the footer cinching up when there's a small body.
 
author
Posts: 297
5
Android Firefox Browser Fedora
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Google 'sticky footer' and pick from one of the thousands of examples.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic