关于Vue中使用全屏容器无法占满屏幕以及样式不生效问题解决方案

最新推荐文章于 2024-04-22 15:24:17 发布
最新推荐文章于 2024-04-22 15:24:17 发布
阅读量4k 收藏 8
点赞数 4
文章标签： 前端 css datav vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61791601/article/details/130369760
版权

先来看示例问题

App.vue文件

global.css文件

 网页效果

 

 可以看到即使设置了宽度和高度为100%都无法占满屏幕，而且容器还超出了屏幕，上拉才可以看到下边框。查看网上解决方法：

1.height设置为100vh， 或者设置为calc（100vh -  0.9rem)。（无效） 

2.新建并引入css文件修改样式。 （上面以尝试，无效）。

3.margin，padding设置为0。（上面尝试，无效）

最后在开发者面板找到问题，在渲染成html页面后，边框组件高度宽度会被加上确定的数值，当宽度和高度超出屏幕可是区域时，出白边以及滑动条，无法占满屏幕。

 由此可知，只需要自己设置样式覆盖掉默认添加上的样式（宽高）即可，那么经过尝试发现，可以使用 !important来提高自己样式的权重这样就可以实现width：100%和height：100%占满屏幕。

占满效果如下

亖夕
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
vue中设置height:100%无效的问题及解决方法
12-29
在vue.js中写新的components的时候，如果在新页面中的模板中设置height：100%的时候一直无效。 App.vue文件 <template> <div id=app> <router> </div> </template> [removed] export default { name: 'App' } [removed] <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx
vue-fullscreen-container
04-07
全屏容器组件 全屏容器会初始化容器默认高宽以及缩放比，当容器尺寸或者浏览器窗口大小发生改变的时候会自动计算缩放比，从而保证容器中的内容不会变形 公司业务中有大量的可视化大屏的需求，一般都是要求内容全屏展示，所以将这个组件从业务中抽离出来 使用这个组件请保证body的默认margin已经设置为0，否则将会引起缩放比例的计算错误 请保证body的高宽为100% 安装 npm install vue-fullscreen-container -S 使用 import Vue from 'vue' import FullScreenContainer from 'vue-fullscreen-container' Vue.use(FullScreenContainer) /// 或者 Vue.component(FullScreenContainer.name, FullScreenContain
使用VUE，页面产生红色全屏报错页面
ZDrawer的博客
03-14 709
找到vue的vue.config.js文件 添加以下配置。修改之后 要重启前端项目 要不然无法更新配置。
vue项目实现页面全屏的效果
qq_30351747的博客
01-23 324
https://blog.csdn.net/weixin_50999303/article/details/134806926
关于 vue element-ui布局容器不能占满全屏
m0_50292146的博客
09-21 827
发现设置最外层的el-container 高度100%或者100vh都没效果。最近在做一个后台管理系统，使用的element-ui布局。最后发现在App.vue的样式加上这两行代码就行了。
vue新建项目 使body充满全屏
luochuanrong的博客
05-22 4385
新建项目 vue默认为body设置了margin:8px 我们可以在App.vue <style>中，设置width和height为100%，对margin进行重写去掉边距 html,body{ width: 100%; height: 100%; margin: 0; }
vue设置height:100vh导致页面超出屏幕可以上下滑动
A_man_of_ideas的博客
01-09 741
刚开始设置的height:100vh，就会出现如图的效果，会出现上下滚动。
vue #app 设置height：100%无法占满全屏问题
weixin_46999564的博客
03-28 2395
因为App.vue中的div标签的父节点是body标签，body标签的父节点是html，body与html的默认高度是auto，app设置height：100%还不够，应该将body于html都设置为height：100%。
【无标题】 移动端解决高度设为100vh时，页面超出窗口问题
qq_61834864的博客
10-31 4919
移动端解决高度设为100vh时，页面超出窗口，会产生滚动条问题
解决vue页面DOM操作不生效的问题
08-27
下面小编就为大家分享一篇解决vue页面DOM操作不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue打包部署到Nginx时,css样式不生效的解决方式
11-19
今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题： Vue-cli项目在本地 使用 npm run dev的时候，页面样式是可以正常加载出来的，但是我将Vue-cli项目通过npm run build 打包生成的 dist 目录部署到Nginx之后，通过访问是无法加载出来样式的。 于是乎，在网上开始寻找资料，发现大部分前辈的解决方案都是在，config的文件夹中的index.js assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPubli
vue 组件中添加样式不生效的解决方法
12-29
在开发项目中遇到在组件中添加样式不生效的情况。具体场景如下 //// vue 组件 <div class=box></div> //我用js在上面div标签中插入一个<p class='text'>text goes here [removed] export default { ... ...
vue在index.html中引入静态文件不生效问题及解决方法
11-28
本文针对的是Vue小白，不喜勿喷，谢谢 出现该问题的标志如下 控制台warning（Resource interpreted as Stylesheet but transferred with MIME type text/html） 出现的原因及解决办法 第一种可能出现原因就是引入...
vue中更改数组中属性,在页面中不生效的解决方法
10-16
今天小编就为大家分享一篇vue中更改数组中属性,在页面中不生效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 593
官网代码（在取消选中状态的时候不生效）
C++ WebServer的细节理解
最新发布
我的博客
04-22 589
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
div添加样式 vue_vue 组件中添加样式不生效的解决方法
05-24
在 Vue 组件中添加样式，可以使用 `style` 标签或者 `scoped` 属性来实现。 如果你使用的是 `style` 标签，但是样式没有生效，可能是因为样式被其他样式覆盖了。你可以尝试使用更具体的选择器或者使用 `!important` 来覆盖其他样式。 如果你使用的是 `scoped` 属性，但是样式也没有生效，可能是因为你的样式选择器中包含了子组件的选择器。在 `scoped` 属性中，Vue 会为每个组件生成一个唯一的 class 名称，以防止样式冲突。如果你的样式选择器中包含了子组件的选择器，那么子组件的 class 名称会被加入到样式选择器中，导致选择器无法匹配到正确的元素。解决方法是使用 `>>>` 或者 `/deep/` 符号来穿透子组件选择器。 例如，你有一个名为 `MyComponent` 的组件，你想要为它的子组件 `Button` 添加样式，你可以这样写： ```html <template> <div class="my-component"> <Button>Click me</Button> </div> </template> <style scoped> /* 不生效的样式 */ .my-component Button { color: red; } /* 生效的样式 */ .my-component >>> Button { color: red; } </style> ``` 或者： ```html <template> <div class="my-component"> <Button>Click me</Button> </div> </template> <style scoped> /* 不生效的样式 */ .my-component /deep/ Button { color: red; } /* 生效的样式 */ .my-component >>> Button { color: red; } </style> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

亖夕

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值