通过css实现-让页面的footer始终位于底部

当页面内容全部占满时,滑动到最下面,显示footer在底部;
当页面内容不满时,footer也是在最底部显示。
具体实现代码如下:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				height: 100%;
			}

			.page {
				display: flex;
				flex-direction: column;
				height: 100%;
			}

			header {
				background: green;
				flex: 0 0 auto;
			}

			.content {
				background: #ccc;
				flex: 1 0 auto;
			}

			footer {
				background: green;
				flex: 0 0 auto;
			}
		style>
	head>
	<body>
		<body>
			<div class="page">
				<header> 头部 header>
				<div class="content">
					这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!
				div>
				<footer> 底部 footer>
			div>
		body>
	body>
html>

你可能感兴趣的:(CSS样式,网站开发,css,前端)