CODEWITHSUNDEEP
htmlcssfooter
Jonathan Grant
Jonathan Grant

Reputation: 143

How to keep footer from being too high up?

I know I didn't word the question very well. I have the <div id="footer"> at the bottom of the page. I didn't use absolute position on it because I don't want it always at the bottom but rather the bottom of the content (so you'll have to scroll down to see it).

The problem is that I'm going to be using PHP to populate a list in the main part of the page. Most of the time this will work great. But if there are only one or two (or none) list entries the footer ends up being way too high and looking stupid. Obviously, if I use the margin to make it right then it will have way too large of a margin when the list has more entries.

How do I accomplish this?

Upvotes: 1

Views: 2635

Answers (2)

Kzqai
Kzqai

Reputation: 23102

The box model will position block level elements depending on their dynamically calculated size. Thus, if you have elements X, Y, and Z, each one will fall after the others depending upon how much content each has in it. As a result, in this case, to ensure that your page doesn't look weird when the main content area is sparse, you'll need to do one of:

  • Give the content area a fixed minimum height (trivial with css min-height, but note that any background styles will expand with the content section expanding )

  • Calculate a margin-bottom between the footer and the content dynamically based on the existing height of the content section. (with javascript, on domReady, you get the height of the content section, and if it isn't a minimum amount, increase the margin-bottom of the content section appropriately, remembering to set a maximum)

Please note that generally the only time it's especially beneficial to do these things are when you have relatively fixed elements like a sidebar nearby, which make short content+footer areas look weird by when side-by side. On mobile, or on long-scrolling site-designs, consider simply keeping the footer right adjacent to the content so that people won't miss its presence entirely.

Upvotes: 0

Shan Robertson
Shan Robertson

Reputation: 2742

The technique is called a sticky footer. Check out a great and simple article here. This will ensure that the footer pushes down with the content and if the page is shorter than the browser the footer will still stick to the bottom of the page.

Upvotes: 2

Related Questions