Exemple de code pour configurer une page Web pour remplir l'écran en utilisant CSS-tutoriel CSS-php.cn

Exemple de code pour configurer une page Web pour remplir l'écran en utilisant CSS

零下一度

Libérer： 2017-04-21 17:12:45

original

2137 Les gens l'ont consulté

Cet article utilise CSS pour définir la page Web à 100 % de hauteur, 100 % de largeur et 100 % de plein d'écran. Vous pouvez y jeter un œil, c'est plutôt bien

<!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>

Copier après la connexion

Étudiants qui en ont besoin. pour apprendre le CSS, veuillez faire attention au site Web php chinoisTutoriel vidéo CSS , de nombreux didacticiels vidéo CSS en ligne peuvent être visionnés gratuitement !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!