vue单页面如何设置高度100%全屏

目录
  • 单页面设置高度100%全屏
  • 高度设置100%无效

单页面设置高度100%全屏

很多时候我们给单页面设置高度100%永远不会全屏

效果图 高度都是靠内容撑起来的

解决很简单

创建一个css

html, body, #app{ height: 100%; margin: 0; padding: 0;}

然后引入全局 （引入到min.js）

现在看效果

高度设置100%无效

场景：当单页面需要整个页面填充颜色等操作，需要页面高度为屏幕高度，设置height：100%无效

解决方法：在App.vue中设置height： 100%

//App.vue
html,body,#app {
    height:100%;
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue-cli中为单独页面设置背景色的实现方法

    例子: <template> <div class="finish-wrap"> <div class="finish-header"> <div class="finish-img"> </div> </div> <div class="finish-tip"> 支付成功 </div> <div class="fi

  • vue构建单页面应用实战

    vue构建单页面应用实战

    1. 为什么要 SPA? SPA: 就是俗称的单页应用(Single Page Web Application). 在移动端,特别是 hybrid 方式的H5应用中,性能问题一直是痛点. 使用 SPA,没有页面切换,就没有白屏阻塞,可以大大提高 H5 的性能,达到接近原生的流畅体验. 2. 为什么选择 vue? 在选择 vue 之前,使用 reactjs 也做过一个小 Demo,虽然两者都是面向组件的开发思路,但是 reactjs 的全家桶方式,实在太过强势,而自己定义的 JSX 规范,揉和在

  • 使用Vue-cli 中为单独页面设置背景图片铺满全屏

    啥也不说了,大家还是直接看代码吧~ <template> <div id="logo"> </div> </template> <script> import meadiaurl from '../../api/mediaurl' export default { name: "logo" </script> <style scoped> #logo{ background: url

  • vue单页面如何设置高度100%全屏

    vue单页面如何设置高度100%全屏

    目录 单页面设置高度100%全屏 高度设置100%无效 单页面设置高度100%全屏 很多时候我们给单页面设置高度100%永远不会全屏 效果图 高度都是靠内容撑起来的 解决很简单 创建一个css html, body, #app{ height: 100%; margin: 0; padding: 0;} 然后引入全局 (引入到min.js) 现在看效果 高度设置100%无效 场景:当单页面需要整个页面填充颜色等操作,需要页面高度为屏幕高度,设置height:100%无效 解决方法:在App.vu

  • VUE 单页面使用 echart 窗口变化时的用法

    在 VUE 项目中,为了使 echart 在窗口变化时能够自适应,要用到 window.resize = function(){ .......}; 但是我在项目刚开始的时间就有一个地方的高度变化使用了 window.resize ,在里面再次使用 会覆盖掉原来的,所以在里面图表使用时可以用 window.addEventListener('resize',this.resizeFu,false); resixeFu 就是图表变化时的方法 resizeFu(){ let div = docume

  • Nginx 解决WebApi跨域二次请求以及Vue单页面的问题

    Nginx 解决WebApi跨域二次请求以及Vue单页面的问题

    一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一段时间后,发现一个很奇怪的问题,每次前端发起请求的时候,通过浏览器的开发者工具都能看到在Network下同一个url有两条请求,第一条请求的Method为OPTIONS,第二条请求的Method才是真正的Get或者Post,并且,第一条请求无数据返回,第二条请求才返回正常的数据. 二.原因 第一个O

  • 详解在不使用ssr的情况下解决Vue单页面SEO问题

    遇到的问题: 近来在写个人博客的时候遇到了大家可能都会遇到的问题 Vue单页面在SEO时显得很无力,尤其是百度不会抓取动态脚本 Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充 Vue单页面又是大势所趋,写起来也不止是一个爽,当然也可以选择多页面 但即使是多页面在面对文章和文档时候也不可能说给每篇文章生成个Vue页面 SSR当然能解决这个问题,但是仔细想想SSR不就跟以前的.php页面一样了么 都是预先拉取所有数据然后填充返回给浏览器,需要多消耗服务器资源,而且配置繁琐

  • 详解处理Vue单页面应用SEO的另一种思路

    详解处理Vue单页面应用SEO的另一种思路

    vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.React,可谓妇孺皆知.随着单页面应用的普及,人们在感受其带来的完美的用户体验,极强的开发效率的同时,也似乎不可避免的要去处理 SEO 的需求. 本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介

  • VUE单页面切换动画代码(全网最好的切换效果)

    我就废话不多说了,直接上代码吧! // 视图切换动画逻辑 let history = window.sessionStorage let historyCount = history.getItem('count') * 1 || 0 function routerTransition (to, from) { const toIndex = history.getItem(to.name) const fromIndex = history.getItem(from.name) let dir

  • 解决vue单页面 回退页面 keeplive 缓存问题

    场景:项目中遇到 vue 点击回退 从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新 A页: B页: 解决方法: 利用keep-alive 缓存需要缓存的页面 1.在app.vue中改写router-view <template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!

  • Vue单页面应用做预渲染的方法实例

    Vue单页面应用做预渲染的方法实例

    目录 前言 vue-cli2.0版本 vue-cli3.0版本 总结 前言 使用vue-cli打包项目一般为spa项目,众所周知单页面应用不利于SEO,有ssr(服务端渲染)和预渲染两种解决方案,这里我们只讨论预渲染 vue-cli2.0版本 安装 npm install prerender-spa-plugin --save webpack.prod.conf.js增加部分代码 const path = require('path') const PrerenderSPAPlugin = re

  • 浅谈Vue单页面做SEO的四种方案

    目录 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 优势: 不足:(开发中遇到的坑) 2.Nuxt 静态应用部署 优势: 不足: 3.预渲染prerender-spa-plugin 优势: 不足: 4.Phantomjs 针对爬虫做处理 优势: 不足: 总结 众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,通过查找资料,大概有以下4种方法.(本人只用过第一,第三种方案) 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 关于服务器渲染:Vue官网介绍 ,

  • vue单页面SEO优化的实现

    vue单页面SEO优化的实现

    SEO(Search Engine Optimization)搜索引擎优化.利用搜索引擎的规则提高网站搜索引擎内的自然排名. 目的:为网站提供生态式的自我营销解决方案,让其在行业内占据领先地位,获得品牌收益,免费流量,从网 站结构.内容建设方案.用户互动传播等. 随着前端框架的强势兴起,vue框架迅猛发展,使用vue构建开发的人员越来越多,但是使用vue-cli打包项目一般为spa(单页面)项目,众所周知单页面应用不利于SEO,于是有ssr(服务端渲染)和预渲染两种解决方案,这里我们只讨论预渲染

随机推荐