<html> 
<head> 
<meta charset="utf-8"> 
<title>全屏布局</title> 
<style> 
/*全屏布局*/ 
*{ list-style:none; margin:0; padding:0;} 
html{ height:100%; overflow:hidden;} 
body{ background:#FCC; height:100%;} 
.top,.left,.right,.bottom{ background:#000; position:absolute;} 
.top{ height:60px; left:10px; top:10px; right:10px;} 
.left{ width:220px; left:10px; top:90px; bottom:90px; background:#333;} 
    
.leftT{ background:#ff0000;width:220px; left:10px; top:0px; height:50%;} 
.leftB{ background:#00ff00;width:220px; left:10px; top:50%; height:50%;} 
    
.right{ left:220px; right:10px; top:90px; bottom:90px; background:#ffff00;} 
.bottom{height:70px; left:10px; right:10px; bottom:10px;} 
</style> 
</head> 
    
<body> 
<div class="top"></div> 
<!--左边两栏--> 
<div class="left"> 
    
<div class="leftT">W</div> 
    
<div class="leftB">E</div> 
    
</div> 
<!--右边--> 
<div class="right"></div> 
<!--底部footer--> 
<div class="bottom"></div> 
</body> 
</html>