欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

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

程序员文章站 2022-04-09 19:22:32
...
本文用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的同学请关注CSS视频教程，众多css在线视频教程可以免费观看！

以上就是用css设置网页占满屏幕的实例代码的详细内容，更多请关注其它相关文章！

相关标签： css，占满屏幕，实例

上一篇： 轻松搞懂WebService工作原理

下一篇： HTML5 Input 类型的详细介绍以及实例代码

推荐阅读