CSS解决高度自适应问题

HTML结构如下：

<div id="main">

    <div id="top">top</div>

    <div id="body">body</div>

</div>

#top {
    background-color: green;
     100%;
    height: 50px;
}
#body {
    background-color: red;
     100%;
    position: absolute;
    top: 50px;
    bottom: 0px;
    left: 0px;
}

　　重点是要top和bottom一起使用，可以强制定义盒模型的区域