css - 如何避免固定元素悬停页面内容？

Question

我正在尝试做一个标准的粘性页脚，但高度未知。如何避免页面内容落后？

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/

（我知道有多种粘性页脚解决方案，但似乎都已过时或/并且不兼容跨浏览器，css3 怎么样？）