sticker-footer 布局

可使用模板

 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

posted on 2018-04-23 23:05 _linka 阅读(191) 评论(0) 编辑收藏举报