溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)vue中設(shè)置height:100%無效如何解決，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
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>這時(shí)候設(shè)置height: 100%;是無效的，在chrome的Elements中發(fā)現(xiàn)height仍然是0px.
設(shè)置高度100%時(shí)，div的高度會(huì)等同于其父元素的高度。而上面中id為app的div（vue掛載的div）的父節(jié)點(diǎn)是body標(biāo)簽，body標(biāo)簽的父節(jié)點(diǎn)是html標(biāo)簽。在默認(rèn)情況下html和body標(biāo)簽的高度為auto，而瀏覽器是不會(huì)自動(dòng)給標(biāo)簽添加高度的，所以html和body標(biāo)簽就為0，自然子div的高度設(shè)置為100%就不起作用了。
此時(shí)應(yīng)該在App.vue文件style中添加如下代碼：
html,body,#app{
height: 100%;
}上述就是小編為大家分享的vue中設(shè)置height:100%無效如何解決了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼