在vue中给html的body高度赋值,vue中登入界面占满body的写法

最近有个项目需要写一个web应用，但是我前端基础太差，以前用过vue，这就摸索着来把。由于写一个单页面应用，页面需要占满全屏。就百度了方法,

用vue-cli安装了工程之后

index.html 里设置css样式:

html,body{

height:100%;

width:100%;

border:hidden;

overflow:hidden;

}

主App.vue里设置app_div的样式：在已有#app中添加 height=100%  和 width=100%，然后在Login里设置width=100%，height=100%，background-color： black

但是运行之后会浏览器左边和上面部分出现窄窄的留白，chrome按F12调试发现div.main 和html的长宽是一样的，这就很奇怪了。

然后注释掉index.html里的隐藏滚动条，发现html页面内容大小会超过浏览器大小而出现了滚动条。猜测很有可能是内部div没对于body有居左居上而导致有留白。于是加上margin=0，padding=0，均无效，又加上border=hidden也无效

后面继续搜索资料发现在div#app里加上

{

padding:0px;

margin:0px;

position:absolute;

top:0px;

left:0px;

width:100%;

height:100%;

border:hidden;

}

最后解决了留白问题