我的圣杯布局<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/CSS"> html,body{ height:100%; } *{margin: 0; padding: 0;} .content{width: 100%;height:100%;} .wrapper{ position: relative; z-index: 20; width:100%; height:100%; } .left-bd{float: left;width: 200px;height:100%;background: blue; } .right-bd{float:right;width:300px;height:100%; background: green;;} .main{position:relative;margin-left:200px;margin-right: 300px;z-index:30;top:-100%;height:100%;background: red;} </style>
</head><body><div class="content"> <div class="wrapper"> <div class="left-bd">left content</div> <div class="right-bd">right content</div> </div> <div class="main">main content</div></div></body></html>