How to avoid fixed element from hovering page contents?

Question

I'm trying to do a standard sticky footer but with unknown height. How to avoid page's contents from going behind it?

CSS

#nav { 
   padding: 20px;
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
}

HTML

<p>Some contents (...)</p>
<div id="nav">Navigation</div>

JSFIDDLE

http://jsfiddle.net/wxTUW/

(I know there are multiple sticky footer solutions but all seem outdated or / and not cross-browser compatible, how about css3?)