* { 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; }
就是很简单,但是很经典的pc端页面的布局分布,自动适应屏幕的