CSS を使用して Web ページを画面いっぱいに設定するサンプルコード-CSSチュートリアル-php.cn

CSS を使用して Web ページを画面いっぱいに設定するサンプルコード

零下一度

リリース： 2017-04-21 17:12:45

オリジナル

2136 人が閲覧しました

この記事では、CSS を使用して Web ページの高さを幅 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 中国語の Web サイトに注意してください。 CSS ビデオチュートリアルでは、多くの CSS オンラインビデオチュートリアルを無料で視聴できます。

以上がCSS を使用して Web ページを画面いっぱいに設定するサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。