vue设置页面的高度100%

作者: 天渺工作室 | 来源:发表于2020-11-03 12:30 被阅读0次

1.设置全局页面高度

在vuecli init的默认工程里面，App.vue 页面中加

//App.vue 页面中
<style>
  html,body,#app{
  height: 100%;
  background:rgba(38, 24, 49,.6);
}
</style>

image.gif

2.设置单个页面的高度100%

用css3 的相对于视口的高度 vh

<template>

    <div class="dataScreen " >
          <div style="height:100vh;" ></div>
    </div>

</template>

image.gif

vue设置页面的高度100%
1.设置全局页面高度在vuecli init的默认工程里面，App.vue 页面中加 2.设置单个页面的高度10...
如何获取父级iframe的dom，并且设置高度
场景：需要将vue嵌套在html页面的iframe中，根据vue页面的高度设置外层的iframe高度防止出现滚动条...
宽高铺满整个屏幕
一、使用100%设置宽高 1、先设置HTML的高度100%，再设置body高度100%，最后再设置div的高度10...
vue 页面设置高度100%
在app.vue设置
vue子组件的高度超过视口高度,父组件的高度设置了100%,父组
项目内容设置高度100%;左侧是一个公用的菜单,为了让它铺满给它设置了高度100%,右侧内容也是100%;body...
temp
vue中，根据屏幕不同设置子组件的高度，ref、$refs、props vue组件页面高度根据屏幕大小自适应 vu...
解决自动高度不能撑高BUG
父级设置了自动高度.如: header{width:100%;height:auto} 在已设置自动高度位置,加上...
移动端隐藏横向滚动条
解决思路：父元素设置高度100px 并设置overflow：hidden，子元素高度= 父元素高度+滚动条宽度（8...
父元素设置min-height子元素设置100%问题
父元素设置min-height子元素高度设置100%取不到值，这是因为子元素 div设置 height:100%；...
div 设置自适应高度 ,height: 100vh
div 设置自适应高度 ,height: 100vh