<!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>
<div id="all">
<div id="header">
头部
</div>
<div id="container" class="clearfix">
<div id="content">中部内容</div>
<div id="side">中部侧边</div>
</div>
<div id="pagefooter">
我是底部
</div>
</div>
</body>
</html>
css设置网页占满屏幕
最新推荐文章于 2024-06-17 10:49:59 发布