记一次百分比布局出现滚动条问题（我是个傻子吧。。。）

问题代码如下

<template>
    <div id="feedback">
        <header>
            反馈情况
        </header>
    </div>
</template>
<script>
export default {

}
</script>
<style scoped>
    #feedback{
        width: 100%;
        height: 100%;
    }
    header{
        width: 100%;
        height: 8%;
        border:1px solid #f1f1f1;
    }
</style>

我真的是要气的吐血了，多么简单的百分比布局呀，不管怎么调，四周都会有滚动条。最后我发现我把header中的border属性去掉之后滚动条就消失了。然后在百度/知乎/CSDN/博客园上一通乱找border的问题。还是啥都没找到。。然后我脑子一激灵，我特么设置的border是四周的呀！！没有滚动条才怪！！然后我把border改成了border-bottom就好了TAT~OMG打死我吧，我觉得世界上最难解决的问题就是最简单的事情造成的错误，一定要细心细心再细心！