[css 实践篇] 解决悬浮的<header> <footer>遮挡内容的处理技巧

我写的实践篇 都是自己在实践项目所遇到的 “拦路虎”

还是很有借鉴的意义的。（实践才是检验真理的唯一标准呀），废话不多说，进去正题

position: fixed 绝对固定底部后会挡住内容

没错，不做处理的话，是会遮住的（定位 脱离了文档流）。

很简单：增加同高度占位元素

一目了然。直接贴代码

  <!-- footer外包裹一层div-->
  <div>
      <!--充当占位符的div块，无实质内容 -->
      <div style="height:60px;"></div> 

      <!--fixed悬浮出来的footer -->
      <section class='footer'>
          <div class='reply-topic'>回复主题</div>
      </section>
 </div> 

出来后的效果图

头部分被遮挡了，也是很简单的给元素 一个上边距就好了呀！

同样给占位元素，也是可以达到理想效果的（不信，你可以试试看。自己动手才是丰衣足食哦）

小技巧你学会了吗？