Beispielcode zum Festlegen einer bildschirmfüllenden Webseite mithilfe von CSS-CSS-Tutorial-php.cn

Beispielcode zum Festlegen einer bildschirmfüllenden Webseite mithilfe von CSS

零下一度

Freigeben： 2017-04-21 17:12:45

Original

2137 Leute haben es durchsucht

Dieser Artikel verwendet CSS, um die Webseite so einzustellen, dass sie 100 % hoch, 100 % breit und 100 % voll ist. Sie können einen Blick darauf werfen, es ist ziemlich gut

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

Nach dem Login kopieren

Studenten, die es brauchen Um CSS zu lernen, achten Sie bitte auf die chinesische PHP-Website CSS-Video-Tutorial . Viele CSS-Online-Video-Tutorials können kostenlos angesehen werden!

Das obige ist der detaillierte Inhalt vonBeispielcode zum Festlegen einer bildschirmfüllenden Webseite mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!