vue中設定height：100%無效的問題

liaojin1發表於2018-07-27
Vue

在vue.js中寫新的components的時候，如果在新頁面中的模板中設定height：100%的時候一直無效。

App.vue檔案

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

<script>
export default {
  name: `App`
}
</script>

<style>
#app {
  font-family: `Avenir`, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
這時候設定height: 100%;是無效的，在chrome的Elements中發現height仍然是0px.

設定高度100%時，div的高度會等同於其父元素的高度。而上面中id為app的div（vue掛載的div）的父節點是body標籤，body標籤的父節點是html標籤。在預設情況下html和body標籤的高度為auto，而瀏覽器是不會自動給標籤新增高度的，所以html和body標籤就為0，自然子div的高度設定為100%就不起作用了。

此時應該在App.vue檔案style中新增如下程式碼：
html,body,#app{
  height: 100%;
}

相關文章