padding 拉长页面的解决

在使用相对高度刚好将页面高度与屏幕高度匹配的时候，

如果用到了padding-top和padding-bottom，

将会拉长页面，

垂直方向上的滚动条就会出现。

这个时候需要给div添加以下样式

box-sizing: border-box;

通常一个块级元素实际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） /  宽度（width）
如果设置了border-box，实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin）