关于DIV+CSS定位的有关问题_Java Web开发

关于DIV+CSS定位的问题

大家可以看到，屏幕的高度已经出现了滚动条，我的本意是：
1、最上边有一个DIV 20px的宽度固定，下边的两个DIV自动铺满剩下的高度，
2、左下的DIV固定，右下的DIV铺满剩下的区域，
现在只实现了第二个，但是高度不知道高如何控制，请各位给指点一下，CSS该如何设置

<%--
  Created by IntelliJ IDEA.
  User: horse
  Date: 2015/8/18
  Time: 10:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="js/main.css">
    <title></title>
</head>
<body>
<div class="main">
    <div class="welcome">
        欢迎你！
        <a href="#">【修改密码】</a>
        <a href="#">【退出】</a>
    </div>

    <div class="tree">
        这是一个树形结构
    </div>

    <div class="workspace">
        这里是工作区
    </div>
</div>
</body>
</html>

body {
    margin: 0px;
    padding: 0px;
    background-image: url("../images/ms_bi_top_bg_tile.gif");
    background-repeat: repeat-x;
    background-color: #515e66;
    color: white;
    font-family: verdana, arial;
    font-size: 13px;
}

a {
    color: white; /*更改颜色*/
    text-decoration: none; /*去掉下划线*/
}

.welcome {
    width: 100%;
    background-image: url("../images/ms_bi_home_flash_topbandbg.gif");
    font-family: verdana, arial;
    line-height: 20px; /*设置之后字体会上下居中*/
    text-align: right;
}

.tree {
    width: 15%;
    padding: 10px;
    min-width: 160px;
    height: 100%;
    overflow: auto;
    float: left;
    border: solid;
    border-width: 3px;
    border-color: brown;
}

.workspace {
    padding: 10px;
    height: 100%;
    overflow: auto;
    border-color: gold;
    border: solid;
    border-width: 3px;
}

------解决思路----------------------
将高度设为$(window).height()-20;