標籤：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布局的方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
