将溢出的部分用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>
最简单的记忆的方法是：只要这个属性设置了宽度又设置了边距，就必须减去这10像素。因为一个完整的模块实际宽度是由它的你设置的宽度+内边距+外边距+边线，所以说假如你设置的宽度是他本来的实际宽度的话，如果你想加上内边距，外边距或者边线，你就必须从你设置的宽度里减去他们。
当然你如果你在这个属性里没有设置宽度就不用加减去了，因为它会按照父级的宽度来自适应的。
![js中a.b与a[b]除了书写外,有什么区别](/aiimages/js%E4%B8%ADa.b%E4%B8%8Ea%5Bb%5D%E9%99%A4%E4%BA%86%E4%B9%A6%E5%86%99%E5%A4%96%2C%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB.png)
