经典页面布局,任何分辨率下,全屏显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>经典页面布局,任何分辨率下,全屏显示</title> <style type="text/css"> *{ list-style:none; margin:0; padding:0;} html{ height:100%; overflow:hidden;} body{ background:red; height:100%;} .top,.left,.right,.bottom{ background:#000; position:absolute;} .top{ height:70px; left:10px; top:10px; right:10px;} .left{ width:300px; left:10px; top:90px; bottom:90px;} .right{ left:320px; right:10px; top:90px; bottom:90px;} .bottom{height:70px; left:10px; right:10px; bottom:10px;} </style> <!--[if IE 6]> <style type="text/css"> html{ padding:90px 10px;} .top,.left,.right,.bottom{ position:relative; top:0; right:0; bottom:0; left:0;} .top{margin-top:-80px;} .left{height:100%;margin-top:10px; float:left;} .right{height:100%; margin:10px 0 0 320px;} .bottom{margin-top:10px;} </style> <![endif]--> </head> <body> <div class="top"></div> <div class="left"></div> <div class="right"></div> <div class="bottom"></div> </body>> </html>