页面底部固定

效果如图：

代码：

			html,
			body {
				width: 100%;
				height: 100%;
				min-height: 100%;
			}
			.container {
				position: relative;
				height: auto;
				min-height: 100%;  //关键的一行代码
				margin: 0;
				
			}
			
			.container .header {
				height: 100px;
				background: #0000FF;
			}
			.container .push {
				padding-bottom: 100px;
			}
			.footer {
				position: relative;
				height: 100px;
				margin-top: -100px;
				background: #0000FF;
				border: #0000FF 1px solid;
			}

                //DOM
		<div class="container">
			<div class="header">
				<p>头部文本</p>
			</div>
			<div class="content">
				<p>主体内容</p>
			</div>
			
		</div>
		<div class="footer">
			<p>底部文本</p>
		</div>

补充知识点：

当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，

但是设置height:100vh，该元素会被撑开屏幕高度一致。