css使footer始终居于底部

haibao 笔记 2014-10-09 11:38 901
一个人的价值, 在于他贡献了什么, 而不在于他获得了什么。——爱因斯坦

凌晨好, 本文除去代码部分,共1057个字,预计阅读时间需要3分钟。

我们在布局的时候有这样一种情况,就是当页面高度没有超过屏幕高度的时候,footer要固定到底部,而当页面超出满屏的高度的时候,footer要随着高度走。下面我们就通过CSS实现这一效果:

第一种方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>css使footer始终居于底部</title>
<style type="text/css">
* { margin:0; padding:0; }
body { font:14px/1.8 arial; }
html, body, .wrap { height:100%; }
.wrap {
    height:auto; 
    min-height:100%; 
    _height:100%; 
    background:#CCC; 
    color:#fff; 
    font-size:18px; 
    text-align:center; 
}
.main { padding-bottom:80px; }
.footer { 
    position:relative; 
    height:80px; 
    line-height: 80px; 
    margin-top:-80px; 
    background:#333; 
    color:#fff; 
    font-size:16px; 
    text-align:center; 
}
</style>
</head>
<body>
<div class="wrap">
    <div class="main">
        <h1>测试标题</h1>
        <p>测试内容测试内容测试内容测试内容,</p> 
        <p>测试内容测试内容测试内容测试内容。</p> 
        <p>测试内容测试内容测试内容测试内容,</p> 
        <p>测试内容测试内容测试内容测试内容。</p> 
        <br />
        <p>测试内容测试内容测试内容测试内容,</p> 
        <p>测试内容测试内容测试内容测试内容。</p> 
        <p>测试内容测试内容测试内容测试内容,</p>
        <p>测试内容测试内容测试内容测试内容。</p>
        <br />
        <p>这里是测试内容测试内容测试内容测试内容!</p>
        <br />   
    </div>
</div>
<div class="footer">
    <h1>这里是footer,页面高度不满,底部固定</h1>
</div>
</body>
</html>

第二种方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页中的底部footer定位</title>
    <style>
        * {
            margin: 0;
        }
        html, body {
            height: 100%;
        }
        .page-wrap {
            min-height: 100%;
            /* equal to footer height */
            margin-bottom: -142px;
        }
        .page-wrap:after {
            content: "";
            display: block;
        }
        .site-footer, .page-wrap:after {
            height: 142px;
        }
        .site-footer {
            background: orange;
        }
    </style>
</head>
<body>
 
    <div class="page-wrap">
 
        <h1>Sticky Footer with Fixed Footer Height</h1>
        <p>
            原理:通过::after伪元素撑起footer的高度,然后margin-bottom一个负值吃掉这个::after元素的高度。
        </p>
 
    </div>
 
    <footer class="site-footer">
        I'm the Sticky Footer.
    </footer>
 
</body>
</html>

第三种方法:

可以通过css3的calc计算高度。
或者用css3的 flexbox,前提是不考虑低版本IE的情况下。

本文标题:css使footer始终居于底部

本文地址:http://www.hehaibao.com/css%e4%bd%bffooter%e5%a7%8b%e7%bb%88%e5%b1%85%e4%ba%8e%e5%ba%95%e9%83%a8/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

一条评论
  • 你哥

    2014-12-23 15:27

    拖拉的时候。再改改!!!

发表评论

电子邮件地址不会被公开。 必填项已用*标注