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

我试图做一个标准的粘性页脚，但高度未知。如何避免页面内容被隐藏

CSS

HTML

某些内容（…）

航行

JSFIDLE

---

（我知道有多种粘性页脚解决方案，但都似乎过时或/或不兼容跨浏览器，css3如何？

定义过时？它有什么问题？需要额外的空非语义元素（而不是伪元素），需要静态高度。所以你想要更交叉的东西并使用CSS3？？？

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

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