用css设置网页占满屏幕的实例代码-css教程-PHP中文网

用css设置网页占满屏幕的实例代码

零下一度

发布： 2017-04-21 17:12:45

原创

2495人浏览过

本文用css设置网页高100%宽100%占满屏幕，可以看一下，挺不错的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>css设置网页高100%宽100%占满屏幕</title>
<meta name="description" content="">
<meta name="keywords" content="">
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		html {
			min-height: 100%;
			_height:100%;
			height:100%;
		}
		body {
			min-height: 100%;
			_height:100%;
			height:100%;
			/*background: #ff0000;*/
		}
		#all {
			background: #EEE;
			border-left: 1px solid #ff0000;
			border-right: 1px solid #ff0000;
			padding: 0 20px 0 20px;
			margin: auto;
			font: 1.5em arial, verdana, sans-serif;
			width: 100%;
			min-height: 100%;
			_height:100%;
		}
		#header,#pagefooter,#container {
			margin: 0 auto;
			width: 85%;
			border: 1px solid #000000;
		}
		#content {
			float: right;
			width: 66%;
			border: 1px solid green;
		}
		#side {
			float: left;
			width: 33%;
			border: 1px solid blue;
		}
		.clearfix::before {
			content: "";
			display: table;
			width: 0;
			height: 0;
			overflow: hidden;
		}
		.clearfix::after {
			content: "";
			clear: both;
			display: table;
			width: 0;
			height: 0;
			overflow: hidden;
		}
		.clearfix {
			zoom: 1;
		}
	</style>
</head>
<body>
<p id="all">
<p id="header">
头部
</p>
<p id="container" class="clearfix">
	<p id="content">中部内容</p>
	<p id="side">中部侧边</p>
</p>
<p id="pagefooter">
我是底部
</p>
</p>
</body>
</html>

登录后复制

需要学习CSS的同学请关注php中文网CSS视频教程，众多css在线视频教程可以免费观看！