可使用模板
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 100% 24 height: 100% 25 overflow: auto 26 } 27 .content-wrapper{ 28 min-height: 100% 29 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 100%; 12 height:100%; 13 } 14 #sticker{ 15 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 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 100%; 11 height: 100%; 12 background-color: #ccc; 13 margin:0; 14 padding: 0; 15 16 } 17 header{ 18 height:44px; 19 100%; 20 text-align: center; 21 line-height: 44px; 22 } 23 #wrapper{ 24 display: flex; 25 flex-direction: column; 26 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>