Home/ Questions/Q 6092235
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T12:25:08+00:00

Sample page On the sample page I have set div#content { padding-bottom:20px; } which

  • 0

Sample page

On the sample page I have set div#content {
padding-bottom:20px;
} which works well if 20px is enough to leave the footer beneath the content div. However, if the footer changes size, I’ll need to change the amount of padding-bottom aswell. I want a more flexible solution.

Is it possible to fix this without moving the footer outside of the content-div?

Update:
found this page that describes a solution to the problem, but the author also states that:

There is only one limitation
You must set the height of the footer div to something other than auto. Choose any height you like, but make sure the value is specified in pixels or ems within your CSS. This is not a big limitation, but it is essential for this method to work correctly.
If you have a lot of text in your footer then it’s also a good idea to give the text a bit more room at the bottom by making your footer a bit deeper. This is to cater for people who have their browser set to a larger text size by default. Another way to solve the same problem is to set the height of the footer in em units; this will ensure that the footer grows in size along with the text. If you only have images in your footer than there’s nothing to worry about – just set your footer height to a pixel value and away you go.

Which leads me to believe that maybe what I want to achieve is not possible without JavaScript.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Because the height of the footer is unknown beforehand, you can’t set an explicit height (in px or em) in the CSS. You can, however, get the footer height with javascript and set your content padding-bottom to it. One line in jQuery:

    $('#content').css('padding-bottom', $('#footer').outerHeight(true) + 'px');

    The jsfiddle: http://jsfiddle.net/blineberry/cFSX4/19/

    You’ll probably want to set the padding-bottom in your CSS to your best guess of the footer height and let the javascript make the minor adjustments as necessary.

    • 0