css sticky footer布局

发表于 | 阅读次数: |
字数统计: 490字 | 阅读时长 ≈ 3分钟
  |    阅读次数

Sticky Footer布局： 当页面中的内容高度小于屏幕高度的时候, 让底部footer显示在底部, 当内容高度大于屏幕高度的时候, 底部footer会紧随内容其后, 滚动内容区域，footer会在内容的最后方显示。

利用flex布局实现sticky footer布局

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
<!DOCTYPE html>
<html>
<head>
    <title>CSS Sticky footer</title>
    <style type="text/css">
        body{
            display: flex;
            flex-flow: column;
            min-height: 100vh;
            overflow: auto;
        }
        h1{
            font-size: 60px;
            text-align: center;
        }
        p{
            font-size: 24px;
            text-align: center;
        }
        .main{
            flex: 1
        }
    </style>
</head>
<body>
    <header>
        <h1>Site name</h1>
    </header>
    <div class="main">
        <p>this is site content about the site description</p>
        <p>this is site content about the site description</p>
        <p>this is site content about the site description</p>
        <p>this is site content about the site description</p>
        <p>this is site content about the site description</p>
        <p>this is site content about the site description</p>
        <p>this is site content about the site description</p>
    </div>
    <footer>
        <p>©️ 2018</p>
        <p>made whith XXXX</p>
    </footer>
</body>
</html>

利用定位和负margin的方法实现

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
	<title>CSS sticky footer</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		/*实现css sticky footer布局的主要样式*/
		.detail{
			position: fixed;
			overflow: auto;
			width: 100%;
			height: 100%;
		}
		.wrapper{
			min-height: 100%;
			width: 100%;
		}
		.main{
			margin-top: 64px;
			padding-bottom: 44px; /* padding-bottom要和下面的footer的高度保持一致以保证footer能够显示出来 */
		}
		.footer{
			margin: -44px auto 0 auto;	/* margin-top 设置向上偏移，用来和main的padding-bottom相抵消保证main里面的内容不够占满全屏的时候让footer显示在页面的底部 */
		}
		.clearfix::after{
			display: block;
			height: 0;
			content: " ";
			clear: both;
			visibility: hidden;
		}
		/* 辅助样式 为了使页面美观一点，可以忽略 */
		.title h1{
			font-size: 60px;
			text-align: center;
		}
		.main p{
			font-size: 24px;
			text-align: center;
		}
		.footer p{
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="detail">
		<div class="wrapper clearfix">
			<div class="title">
				<h1>Site name</h1>
			</div>
			<div class="main">
				<p>this is content about the site </p>
				<p>this is content about the site </p>
				<p>this is content about the site </p>
				<p>this is content about the site </p>
			</div>
		</div>
		<div class="footer">
			<p>©️ XXX</p>
			<p>made XXX</p>
		</div>
	</div>
</body>
</html>

这里写图片描述