0

As mentioned in the title, here are the requirements:

  • a footer that must always be at the bottom of the viewport (no pushdown)
  • css only
  • height based on the content of the footer (variable)
  • somehow prevent overlap of the main content element - when scrolled down
  • no tables

header

content

footer

if you remove any of the requirements, I know how to do it, but not with all requirement intact. does anyone know a solution?

Egi
  • 1,256
  • 9
  • 20

2 Answers2

3

To put the footer on the bottom you can use a variation of the following:

.some-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%
}

The problem with this is that the main content will be behind the footer and you won't be able to scroll it up. And you can't just put a padding-bottom on the content because you don't know the footer's height.

I would recommend putting a duplicate of the footer after the content, but this one with position: relative, and with opacity: 0. This way you can always scroll until all the content is visible, independently of the footer's height.

Gabriel
  • 473
  • 4
  • 11
  • that actually works the way I want it to. I don't like it because it is a hack, but the invisible footer really does it's job. I will wait a bit and see if somebody knows a clean solution, before I accept your answer :) thank you very much. – Egi Apr 24 '15 at 22:39
-1

This should work as you want! :) It will always be at the bottom of the page. This will always be at the bottom of the viewport, NO MATTER WHAT! :D 

#footer{
  height: auto;
  min-height: 100px;
  width: 100%;
  background-color: blue;
  bottom: 0px;
  position: fixed;
  display: block;
  z-index: 100000;
}
<div id="footer">
</div>
Michael Jones
  • 2,222
  • 18
  • 32
  • his problem is not that he doesn't know how to set position fixed. it's that he doesnt know how to prevent the content from flowing beneath the footer, which could be a variable height. I dont think it is possible with just css – Kai Qing Apr 23 '15 at 23:37
  • Position fixed will allow it to stick to the bottom of the page. The above code works perfectly. – Michael Jones Apr 23 '15 at 23:46
  • Once again, he knows that. he wants it to "somehow prevent overlap of the main content element" so if the viewport is 600px tall, and the footer is 200px, and the content is 800px, he wants the content to be 400px and overflow scroll before it goes beneath the footer. Footer is variable height, so he doesnt know it will always be a set number, which means he wants calculated heights where elements use other elements to determine size. – Kai Qing Apr 23 '15 at 23:49
  • as kai qing already told, your solution ignores the 4th requirement. or can you tell me how to set a "body" div in a way, that once you have completely scrolled down in the page, no overlapping occures? – Egi Apr 24 '15 at 22:13