用相对div填充剩余高度

Question

我有三个div

div.main = encloses two child div
div.head = uses about 10%~20% of div.main height
div.body = uses about 80%~90% of div.main height

我希望div.body填充分配div.head高度后留下的剩余高度空间。

我希望尽可能使用position: relative;。

我使用百分比值表示高度和宽度而不是像素，因为屏幕分辨率可能会有所不同。我希望它根据可能看到它的屏幕分辨率自动调整大小。

我注意到如果我使用像素值，它可以工作但不能用于百分比。