将footer固定在页面最下方

方法一：

HTML结构：

 1   <div id="id_wrapper">
 2     <div id="id_header">
 3       Header Block
 4     </div> 
 5     <div id="id_content">
 6       Content Block
 7     </div>
 8     <div id="id_footer">
 9       Footer Block
10     </div> 
11   </div>

 

CSS结构：

 1       html, body {
 2     /* 設定body高度為100% 拉到視窗可視的大小 */
 3     height: 100%;
 4 }
 5 *{
 6     padding: 0;margin:0;
 7 }
 8 
 9 #id_wrapper {
10     /* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */
11     min-height: 100%;
12     /* 位置設為relative, 作為footer區塊位置的參考 */
13     position: relative;
14 }
15 
16 #id_header {
17     /* 設定header的高度 */
18     height: 40px;
19     box-sizing: border-box;
20     background: green;
21 }
22 
23 #id_content {
24     /* 留出footer區塊的空間  padding-bottom与footer高度相同 */
25　　　　
26     padding-bottom: 40px;  
27     /*height: 800px;*/
28     background: #666;
29 }
30 
31 #id_footer {
32     /* 設定footer的高度 */
33     height: 40px;
34     box-sizing: border-box;
35     /* 設定footer絕對位置在底部 */
36     position: absolute;
37     bottom: 0;
38     /* 展開footer寬度 */
39     width: 100%;
40     background: yellow;
41 }

 

 

 

方法二：footer高度固定+绝对定位

html结构：

1     <div class="header">header</div>
2      <div class="mian">main content</div>
3     <div class="footer">footer</div>

CSS设置：

1 html{height:100%;}
2 body{min-height:100%;margin:0;padding:0;position:relative;}
3 
4 .header{background-color: #ffe4c4;height:40px;width: 100%;}
5 .main{padding-bottom:100px;width: 100%;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */
6 .footer{position:absolute;bottom:0;width:100%;height:100px;background-color: #ffc0cb;}

首先，设置body的高度至少充满整个屏幕，并且body作为footer绝对定位的参考节点；

其次，设置main（footer前一个兄弟元素）的padding-bottom值大于等于footer的height值，以保证main的内容能够全部显示出来而不被footer遮盖；

最后，设置footer绝对定位，并 设置height为固定高度值 。

 

方法三：footer高度任意+js

HTML结构：

<body>
    <header>header</header>
    <main>main content</main>
    <footer>footer</footer>
</body>

 

CSS设置：

html,body{margin:0;padding: 0;}
header{background-color: #ffe4c4;}
main{background-color: #bdb76b;}
footer{background-color: #ffc0cb;}

/* 动态为footer添加类fixed-bottom */
.fixed-bottom {position: fixed;bottom: 0;width:100%;}

 

js代码:

$(function(){
    function footerPosition(){
        $("footer").removeClass("fixed-bottom");
        var contentHeight = document.body.scrollHeight,//网页正文全文高度
            winHeight = window.innerHeight;//可视窗口高度，不包括浏览器顶部工具栏
        if(!(contentHeight > winHeight)){
            //当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom
            $("footer").addClass("fixed-bottom");
        } else {
            $("footer").removeClass("fixed-bottom");
        }
    }
    footerPosition();
    $(window).resize(footerPosition);
});

 

posted @ 2017-03-19 16:14  objectBao  阅读(2558)  评论(0)  编辑  收藏  举报