Html 出现滚动条怎么处理？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>就这破网站</title>
<style type="text/css"> 
body{
margin:0; padding:0;
}
#wai{
position:absolute;
height:565px;
width:1018px;
top:0px;
left:0px;
}
#wai #left{
height:565px;
width:508px;
position:absolute;
border:1px solid #999;
top:0px;
left:0px;
}
#wai #left #kai{
position:absolute;
height:25px;
width:27px;
top:240px;
right:0px;
border:1px solid #09F;
font-size:24px;
cursor:pointer;
}
#wai #left #kai #zi{
position:absolute;
top:0px;
left:2px;
font-size:24px;
font-weight:bold;
color:#CCC;
}
#wai #right{
height:565px;
width:508px;
position:absolute;
border:1px solid #999;
top:0px;
right:0px;
}
#wai #right #shi{
position:absolute;
height:25px;
width:27px;
top:240px;
left:0px;
border:1px solid #09F;
cursor:pointer;
}
#wai #right #shi #zi{
position:absolute;
top:0px;
right:2px;
font-size:24px;
font-weight:bold;
color:#CCC;
}
</style>
<script type="text/javascript"> 
function $(id){return document.getElementById(id);}
var M = null,pos = 0;

function cl(id){
M = $(id);
}
function move(){
if(M){
if(parseInt(M.offsetLeft) > -509){
pos--;
$("left").style.left = pos + "px";
$("right").style.right = pos + "px";
}
}
setTimeout("move()",50);
}
</script>
</head>
<body onload="move()">
<div id="wai">
    <div id="left">
        <div id="kai" onclick="cl('left')"><div id="zi">打</div></div>
    </div>
    <div id="right">
        <div id="shi" onclick="cl('right')"><div id="zi">开</div></div>
    </div>
</div>
</body>
</html>如题 如何让底部的滚动条消失？？？？