0
点赞
收藏
分享

微信扫一扫

解决在vue中设置的height: 100%没有效果

Raow1 2022-08-04 阅读 135


在新的页面设置height无效果的时候。需要改动App这个文件的heigth

解决在vue中设置的height: 100%没有效果_vue.js


解决办法。给app这个盒子设置高度。默认情况下为0

设置高度100%时,div的高度会等同于其父元素的高度。而上面中id为app的div(vue挂载的div)的父节点是body标签,body标签的父节点是html标签。在默认情况下html和body标签的高度为auto,而浏览器是不会自动给标签添加高度的,所以html和body标签就为0,自然子div的高度设置为100%就不起作用了

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

vue.js
这个时修改后的

<template>
<div id="app" >
<router-view></router-view>
</div>

</template>

<style>
html,body,#app{
height: 100%;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
<script>
export default {
data() {
return {
}
}
};
</script>

实际例子。

我的登录页面设置了这个页面的高度,但是没有效果。修改后成功解决

解决在vue中设置的height: 100%没有效果_html_02

解决在vue中设置的height: 100%没有效果_vue.js_03


举报

相关推荐

0 条评论