让现有如下HTML+CSS代码。它能生成上图的左图，现在要将它改成右图的样子（黄色方框正好填满黑框的剩余空间），应该怎么设计CSS代码？提示，最短的解法需要修改.four（黄色框的class），不用改动现有代码，只需加入新的属性即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style>
.main{
font-size:2em;
width:100px;
height:7.5em;
position:absolute;
top:10pt;
left:10%;
border:2px solid #000000;
}
.one,.two,.three,.four{
padding-top:0.5em;
height:2em;
background-color:blue;
}
.two{
padding-top:1em;
background-color:green;
}
.three{
padding-top:1em;
font-size:0.5em;
background-color:red;
}
.four{
background-color:yellow;
}
</style>
</head>
<body>
<div class="main">
<div class="one"></div>
<div class="two"></div>
<div class="three">
<div class="four"></div>
</div>
</div>
</body>
</html>
解题思路：
对网页设计有兴趣的同学尽管来尝试吧，虽然道理非常简单，但亲身尝试对今后你使用em元素非常有帮助，尤其是在font-size使用相对单位时的“特质”，有时候你的浏览器并没有出错（这段代码在IE6与7，FF和Opera上的渲染都完全相同），出错的只是你的大脑。
答案周末公布。
