移动WEB—如何解决当header和footer的fixed布局的方法

1、添加占位元素，缺点：增加了不必要的多余元素，影响语义性

html代码

 1  <body>
 2      <div class="header">
 3      </div>
 4       
 5      <!-- header占位元素 -->
 6      <div class="header-place"></div>
 7      <!-- header占位元素-end -->
 8           
 9      <div class="container">
10      </div>
11  
12      <!-- footer占位元素 -->
13      <div class="footer-place"></div>
14      <!-- footer占位元素-end -->
15          
16      <div class="footer">
17      </div>
18  </body>

scss(sass)代码

 1 $header_height:4rem;
 2 $footer_height:5rem;
 3 
 4 .header{
 5     width: 100%;
 6     height: $header_height;
 7     line-height: $header_height;
 8     position:fixed;
 9     z-index:999;
10 }
11 
12 .header-place{
13     width: 100%;
14     height: $header_height;
15     line-height: $header_height;
16 }
17 
18 .footer{
19     width: 100%;
20     height: $footer_height;
21     position: fixed;
22     z-index:999;
23 }
24 
25 .footer-place{
26     width: 100%;
27     height: $footer_height;
28 }

 2、使用伪类

 1 body:before{
 2     width: 100%;
 3     height: $header_height;
 4     line-height: $header_height;
 5     display: block;
 6     content: '';
 7 }
 8 
 9 body:after{
10     width: 100%;
11     height: $footer_height;
12     line-height: $footer_height;
13     display: block;
14     content: '';
15 }

 

posted on 2016-11-08 15:51  放羊的星星bky  阅读(1727)  评论(0)  编辑  收藏  举报

导航