                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

关于纵向自适应

想要将中间main设计成根据里面的div标签大小自己调整大小，用了绝对定位之后就不能用margin：0 auto了，下面的foot也乱了，求大神....

<!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;font-size:30px; font-weight:bold;color:yellow;}
    .top,.main{margin:0 auto}
    .top{width:800px;height:50px;background:green;}
    .main{width:800px;position:absolute;top:50px;bottom:40px;background:#99CCCC;}
        .left{width:20%;height:50px;background:#60C;margin:5px 0;float:left}
        .middle{width:50%;height:60px;background:#6CC;margin:5px 5%;float:left}
        .right{width:20%;height:70px;background:purple;margin:5px 0;float:right}
    .foot{height:40px;background:red;}
</style>
</head>

<body>

<div class = "top">top</div>

<div class = "main">
    <div class = "left">left</div>
    <div class = "middle">middle</div>
    <div class = "right">right</div>
</div>
<div class = "foot">foot</div>
</body>
</html>

想做成下图这样，只是main这个div是根据里面的东西自己撑起来的，可以做到么...