how to make a div tag fill the remaining height of its parent tag?

It is a common problem I think, but the solutions that can be found via google are somehow too   ugly, however, like an absolute position or table-like display(see css property position and display).

 Finally, I found that css3 gives a perfect solution: with a {display:box} and {box-orient:vertical} applied to the parent tag and {box-flex: 1} applied to the greedy div tag. If you are using chrome/chromium, replace box with -webkit-box, box-orient with -webkit-box-orient and box-flex with -webkit-box-flex, elif firefox, google it, elif IE, forget it.