将溢出的部分用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% { background:red} 表示背景在0－1秒内变红色；50% { width:80px} 表示宽度在0－5秒内由0变80px；
70% { border:15px solid yellow} 表示边框在0－7秒内由无边框变为15px实心的黄色边框；
100% { width:180pxheight:180px} 表示宽度从5－10秒变成180px，高度变成180px；
综上所述，前面的百分比，代表的是执行的时间，按秒来计算。
望采纳
写CSS 3年，写响应式布局2年。今天有幸学到这招真的感激不尽。
先不说无用的了，这问题的起因是IE9对margin属性理解的有些误差。
如果仅仅是IE9会出现这种麻烦，那么我已经解决了，虽然有些小问题还是未能解决，代码如下
margin:0 -50%\0这代码要加在你原有代码的后面不要覆盖，后面的\0不要删掉，这是CSS HACK技术，专门针对IE9
小问题就是当显示范围小于图片的50%的时候，这时候图片的缩放会跟margin:0 -100%有所不同。
IE9的确测试了是正常的。这有可能仅仅是IETESTER的BUG而已
