首页 > 代码库 > 移动WEB—如何解决当header和footer的fixed布局的方法

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

2024-08-19 16:32:18   218人阅读

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布局的方法


联系
我们