去掉父元素position：absolute属性后没有高度了？

前一阵子上网得时候偶然间看到这样一个题：将一个页面均分成四等分。于是我顺手做了一下。以下是我的代码和效果：

由于好奇心的作用，我把position：absolute属性删掉了，结果页面上啥也没有了。我不明白其中的原理，就去网上找了找资料并问了问朋友，到目前为止我的理解是这样的：
我们都知道absolute属性会使div脱离文档流，但是我没想到absolute这个属性脱离文档流能脱离的如此“干净”，比float脱离的还要彻底。使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。这两篇大神的文章对此有更详细的解释：xiaofenguo的博客 张鑫旭的博客
在没设置position：absolute时，div高度100%是针对它的父元素body来说的，由于div中没有内容来占空间，所以此时的body的高度为0，所以div的高度也为0.同理body对于html。所以页面就啥都没有了。而在设置了position：absolute之后，div完全脱离了文档流，不受html标签限制了，在这种情况下如果想使页面显示出来，可以设置html,body{width:100%; height:100%;}

在这里再引用一段话作参考：

你需要理解浏览器是如何计算高度和宽度的。Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。

但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。