sticker-footer 布局
阿新 • • 發佈：2018-04-24
document gree eee 內部 spl relative app sele add
可使用模板
1 //html 2 <div class="wrapper"> 3 <div class="content-wrapper clearfix"> 4 <div class="content"></div> 5 </div> 6 <div class="footer"></div> 7 </div> 8 9 //css 10 .clearfix{ 11 display: inline-block; 12 } 13 .clearfix:after{14 display: block; 15 content: ‘‘; 16 height: 0; 17 line-height: 0; 18 clear: both; 19 visibility: hidden; 20 } 21 .wrapper{ 22 position: fixed 23 width: 100% 24 height: 100% 25 overflow: auto 26 } 27 .content-wrapper{ 28 min-height: 100% 29 width: 100% 30 } 31 .content{32 padding-bottom: 40px 33 } 34 .footer{ 35 position: relative 36 margin-top: -40px 37 clear: both 38 }
介紹
1、嵌套層級不深，可直接繼承自 body width：100%； height:100%;
1 // html 2 <body> 3 <div id="sticker"> 4 <div class="sticker-con">我是內容</div> 5 </div>6 <div class="footer">我是腳</div> 7 </body> 8 9 // css 10 html,body{ 11 width:100%; 12 height:100%; 13 } 14 #sticker{ 15 width:100%; 16 min-height:100%; 17 } 18 .sticker-con{ 19 padding-bottom:40px; // 40px 為 footer 本身高度 20 } 21 .footer{ 22 margin-top:-40px; // 40px 為 footer 本身高度 23 }
2、嵌套層級很深，無法直接從上級繼承 百分比高度的
第一種方法：給需要的 sticker-footer 創建一個 wrapper
1 <body> 2 <div id="wrapper"> 3 <div id="sticker"> 4 <div class="sticker-con">我是內容</div> 5 </div> 6 <div class="footer">我是腳</div> 7 </div> 8 </body> 9 10 .wrapper{ 11 position:fixed; // 這樣 wrapper 就可以直接從 html,body 繼承 百分比高度了 12 overflow:auto; // 當高度超過 100% ;時產生滾動條 13 width:100%; 14 height:100%; // 繼承自 body 15 } 16 // wrapper 內部包裹的結構，就如上所示了，css樣式也一樣
3. 當無法用百分比獲取高度時，也可通過js方式獲得
1 //css樣式同第一種， 只是 sticker 的 min-height 用css獲取 2 3 <body> 4 <div id="sticker"> 5 <div class="sticker-con">我是內容</div> 6 </div> 7 <div class="footer">我是腳</div> 8 </body> 9 10 11 var sticker = document.querySelector(‘#sticker‘); 12 var h = document.body.clientHeight; 13 sticker.style.minHeight = h - 44 + ‘px‘; 14 15 //這種方式也可應對一些特殊情況，比如有頭部導航欄的情況，可以靈活的處理 min-height:
4. 強大的 flex 布局 flex-direction:column
將wrapper容器 display:flex; flex-direction:column
sticker: flex:1; 占據除footer以外的剩余空間
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 6 <title>sticker footer</title> 7 </head> 8 <style> 9 html,body{ 10 width: 100%; 11 height: 100%; 12 background-color: #ccc; 13 margin:0; 14 padding: 0; 15 16 } 17 header{ 18 height:44px; 19 width: 100%; 20 text-align: center; 21 line-height: 44px; 22 } 23 #wrapper{ 24 display: flex; 25 flex-direction: column; 26 width: 100%; 27 /*height: 100%;*/ 28 } 29 #sticker{ 30 background-color: red; 31 flex: 1; 32 } 33 #sticker .sticker-con{ 34 padding-bottom: 40px; 35 } 36 .footer{ 37 background-color: green; 38 height: 40px; 39 } 40 </style> 41 <body> 42 43 <header>我是頭部</header> 44 <div id="wrapper"> 45 <div id="sticker"> 46 <div class="sticker-con">我是內容</div> 47 </div> 48 <div class="footer">我是腳</div> 49 </div> 50 51 </body> 52 <script> 53 var wrapper = document.querySelector(‘#wrapper‘); 54 var h = document.body.clientHeight; 55 wrapper.style.minHeight = h - 44 + ‘px‘; // 減去頭部導航欄高度 56 57 </script> 58 </html>
原內容鏈接： https://segmentfault.com/a/1190000011704597
sticker-footer 布局