用css設定網頁佔滿螢幕的實例代碼-css教學-PHP中文網

首頁

web前端

css教學

用css設定網頁佔滿螢幕的實例代碼

零下一度

Apr 21, 2017 pm 05:12 PM

本文用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線上影片教學可以免費觀看！

以上是用css設定網頁佔滿螢幕的實例代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

兩個圖像和一個API：我們重新著色產品所需的一切Apr 15, 2025 am 11:27 AM

我最近找到了一種動態更新任何產品圖像的顏色的解決方案。因此，只有一種產品之一，我們可以以不同的方式對其進行著色以顯示

每周平台新聞：第三方代碼，被動混合內容，連接最慢的國家的影響Apr 15, 2025 am 11:19 AM

在本週的綜述中，燈塔在第三方腳本上闡明了燈光，不安全的資源將在安全站點上被阻止，許多國家連接速度

託管您自己的非JavaScript分析的選項Apr 15, 2025 am 11:09 AM

有很多分析平台可幫助您跟踪網站上的訪問者和使用數據。也許最著名的是Google Analytics（廣泛使用）

它全部都在頭上：管理帶有React頭盔的React Power Site的文檔頭Apr 15, 2025 am 11:01 AM

該文檔負責人可能不是網站上最迷人的部分，但是其中所處的內容對於您的網站的成功也一樣重要

JavaScript中的Super（）是什麼？Apr 15, 2025 am 10:59 AM

當您看到一些稱為super（）的JavaScript時，在子類中，您會使用super（）調用其父母的構造函數和超級。訪問它

比較不同類型的本機JavaScript彈出窗口Apr 15, 2025 am 10:48 AM

JavaScript具有各種內置彈出API，它們顯示用於用戶交互的特殊UI。著名：

為什麼可訪問的網站如此難以構建？Apr 15, 2025 am 10:45 AM

前幾天，我與一些前端人們聊天，講述了為什麼這麼多公司努力創建可訪問的網站。為什麼可訪問的網站如此艱難

'隱藏”屬性顯然很弱Apr 15, 2025 am 10:43 AM

有一個HTML屬性，它可以正是您認為應該做的：

See all articles

熱AI工具

熱工具

mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），