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;
}
【vue中登入界面占满body的写法】最后解决了留白问题
推荐阅读
- 深入理解Go之generate
- 我错了，余生不再打扰
- 由浅入深理解AOP
- 如何寻找情感问答App的分析切入点
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 其实你就是个普通人
- 带有Hilt的Android上的依赖注入
- Node.js中readline模块实现终端输入
- 解决SpringBoot引用别的模块无法注入的问题