使用padding计算高度实现页面的高度自适应

为什么说要使用padding来计算高度而不是margin呢，这是因为对于每一个dom元素来讲,padding的高度是包含在dom元素内的，而margin是在dom元素之外的。

我举个例子，看如下图

如果我想计算这个表格的高度，并且让这个表格处于蓝色的方框内，如果表格的高度超过了计算的高度，那么表格内部就会产生滚动条。并且不论怎么缩放浏览器窗口，浏览器都不会有滚动条，这就是我想要实现的自适应。

这里的标题采用的也是padding，而不是margin，然后我们现在来计算一下表格的高度。

首先我们在table组件中加一个height属性，绑定一个tableHeight,也就是表格的高度。

之后我们在页面初始化的时候对表格的高度进行计算。

，这里我设置了container的padding上下都是100px，可以发现722-66-200=456，这个就是表格的高度。然后我们尝试缩小浏览器窗口

可以看到，缩小窗口的时候，因为使用了window.onresize进行了监听，每次窗口大小发生变化，都会触发calculateHeight重新计算表格的高度，并且这里我们额可以看到，表格的内容已经超过了表格本身的高度的，所以表格出现了滚动条，而浏览器并没有产生滚动条。

实际上，表格的高度就等于整个窗口的高度减去container的上下padding然后减去title的content的高度和title的padding的高度，而title的高度等于content的高度加上Padding的高度，也就是title这个dom元素本身的高度。

如果我们使用margin的话，就不是这样了，从代码里可以看到dom元素的高度是利用offsetHeight来得到的，假设现在title的高度改成content的高度加上margin的高度，那么offsetHeight得到的实际上只是content的高度，原因在最开头也说了，这是因为margin是在dom元素之外的，那么在这种情况下，如果margin根据需求的不同需要一直改变的话，我们计算高度的时候就也需要同步的去修改这个margin,不然就会有问题。

而采用padding，不管你高度怎么变，我offsetHeight计算的都是整个dom的高度，根本不用关心其他因素，每次计算总能精确的计算出表格的高度。