# Vue 没有办法让页面高度为 100% 怎么办？

- Link: https://www.ixiqin.com/2019/02/21/vue-theres-no-way-to-make-the-page-height-is-100/
- Published: 2019-02-21T16:36:23+08:00
- Author: 白宦成

在进行 Vue 后台开发时，一般来说，我们希望我们的应用的首页是 100% 高度，其样式大致
如下

![](https://postimg.aliavv.com/201810/sfk1o.jpg)

效果图

但是一开始，往往会遇到高度没有办法设置为 100%。

**这是由于在 Vue 中，并没有给 html,body,#app 设置默认高度**

解决方案也很简单，只需要在 `App.vue` 的 `style` 中添加如下代码

    ```shcb-line-numbers
    html,
    body,
    #app {
      height: 100%;
    }
    Code language: CSS (css)
    ```