小经验 | 解决关于使用了position:relative后的高度或者宽度的调整问题

今天写代码的时候发现，某一个元素设置了height属性为默认的auto，但高度不在自己预期之中。如下图，最底部多了很大一片空白。

将相关的元素设置border属性（用于调试），但一直找不到是哪里的问题。直到用谷歌调试一下，发现这个东西。

感觉这一个元素的高度刚好就是下面多出来的高度。后来我才忽然想起，原来右边的元素（表格）定义了position:relative属性。

position：relative–相对于本来的位置进行定位，同时不脱离文档流。

所以，中间的box高度实际上应该是左边元素高度+右边元素高度+上下padding的值。所以才会出现底部高度突出来的问题。

解决思路：先获取到相关元素的属性值，再赋值给变量就好。

加入下面的JavaScript代码。

// 中间部分的高度设置
var nav_height = document.getElementById("nav").offsetHeight;
var content_height = document.getElementById("content").offsetHeight;
var basicBox_height = (nav_height > content_height)?nav_height:content_height;
document.getElementById("basicBox").style.height = content_height + 40 + "px";

最后问题解决了。

有个小提示：前面使用了Vue进行渲染，所以这一块的代码必须写在最后面，等渲染后才能确定高度。