解决Vue项目最外部有一个html元素导致宽度不能完全填充整个浏览器方法

最新推荐文章于 2024-12-04 09:46:38 发布

为什么不运行

最新推荐文章于 2024-12-04 09:46:38 发布

阅读量1.2k

点赞数 5

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/z2428478096/article/details/122763314

版权

在用Vue-cli搭建一个项目启动后，设置宽度100%发现内容没有完全填充浏览器宽度，上边和左边都有空白

代码

<template>
        <!--登陆页面-->
   <div class="login">
       <!-- 登录头部图片 -->
        <img src="@/assets/images/error.png" alt="">
  </div>
</template>

<script>
    export default {
     
    }
</script>

<style scoped>
.login{
    width: 100%;
    height: 200.002px;
    background-color: #dd6161;
}
.login img{
    height: 190.001px;
}
</style>

网页图

解决方法

然后我在原vue文件页面和app.vue文件页面写入*{padding: 0;margin: 0;}发现都没有用，后来我打开控制面板发现最外部包裹了一个html元素，所以我就想起来在项目的public文件夹下有一个index.html文件，给他加入*{padding: 0;margin: 0;}就解决了。

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
  </style>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>