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 }
时间： 2024-08-07 17:01:19