<!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的同学请关注css视频教程，众多css在线视频教程可以免费观看！
以上就是用css设置网页占满屏幕的实例代码的详细内容。