<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0px}/*让整个页面边距为0px*/
#left,#right{ width:200pxheight:300pxbackground:#069}/*设置左右两个div的宽度、高度为200px和300px，背景为蓝色*/
#left{ position:absolutetop:0pxleft:0px}/*将左边的div绝对定位到左上。*/
#right{ position:absolutetop:0pxright:0px}/*将左边的div绝对定位到右上。*/
#center{height:300pxmargin:0 200 0 200pxpadding-left:200pxbackground:#F63}
/*把中间的div高度同样设置为300px，宽度让其自适，左右的外边距为200px（给左右的div让出位置），背景为橙*/
</style>
</head>
<body>
<div id="left">左边内容</div>
<div id="center">运用绝对定位就不用套一个大div了，且不用添加浮动属性，使代码更简洁</div>
<div id="right">右边内容</div>
</body>
</html>
把以下代码运行试试看是不是你所需要的效果！将溢出的部分用overflow:hidden隐藏掉！
一般最好不要用百分比划分页面，因为在IE和FF显示效果会不一样！
<html>
<head>
<style>
<!--
body{
text-align:center
margin:0px
padding:0px
}
#main{
width:800px
height:600px
border:1px solid #f00
margin:0px auto
padding:0px
overflow:hidden
}
#banner{
width:100%
height:15%
background-color:Fcc8ff
border-bottom:1px solid #f00
text-align:center
color:#000
font:20px 黑体
}
#content{
width:100%
height:100%
}
#left{
width:15%
height:100%
float:left
background-color:#eec2dd
border-right:1px solid #f00
}
#right{
height:100%
float:right
}
-->
</style>
</head>
<body>
<div id="main">
<div id="banner">banner部分</div>
<div id="content">
<div id="left">左菜单</div>
<div id=""right">右主体</div>
</div>
</div>
</body>
</html>
比如宽度为父元素的50%加上5像素：width:calc(50% + 5px)
要注意加号（或减号）两边一定要加上空格！
再比如宽度是父元素的三分之一再减去3像素：
width:calc((100% / 3) - 3px)
乘号（或除号）两边可以不加空格，但建议最好加上！
此外必须注意这种方法属于css3标准，不是什么浏览器都适用的哦！
