Always show a div at the bottom of body with css only

Question

I want to see the footer of a page all the time. So I want it sticky. It should not depend on how many content is on the page. So I came up with position:fixed and bottom:0. Of course this works as it should but I don't want the footer on bottom of the browser but at the bottom of documents body.

the black border is the browser-window

Demo (jsfiddle)

Is there a way to achieve this?

Answer 1

Since browser-support for position:sticky is here, there is a simple solution for it:

.content {
  padding: 5pt;
  border: 1px dashed rgb(200, 0, 0);
}

.footer {
  padding: 5pt;
  background-color: rgba(0, 150, 0, .8);
  position: sticky;
  bottom: 0;
}

<div class="content">
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...
</div>
<div class="footer">I'm the footer!</div>