Rumah >hujung hadapan web >tutorial css >用css设置网页占满屏幕的实例代码
用css设置网页占满屏幕的实例代码
- 零下一度asal
- 2017-04-21 17:12:452140semak imbas
本文用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在线视频教程可以免费观看！
Atas ialah kandungan terperinci 用css设置网页占满屏幕的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css中vertical-align属性实例详解Artikel seterusnya：一款漂亮的纯CSS手风琴效果代码