码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2016-11-08 17:20:54      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:fixed   pos   containe   解决   sas   osi   ade   header   head   

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>

2、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 }

 

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

标签:fixed   pos   containe   解决   sas   osi   ade   header   head   

原文地址:http://www.cnblogs.com/fydxx/p/6043340.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!