vue單頁(yè)面如何設(shè)置高度100%全屏
更新時(shí)間：2022年04月14日 09:31:52 作者：不想禿頭i
這篇文章主要介紹了vue單頁(yè)面如何設(shè)置高度100%全屏，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
單頁(yè)面設(shè)置高度100%全屏
很多時(shí)候我們給單頁(yè)面設(shè)置高度100%永遠(yuǎn)不會(huì)全屏
效果圖 高度都是靠?jī)?nèi)容撐起來(lái)的
解決很簡(jiǎn)單
創(chuàng)建一個(gè)css
html, body, #app{ height: 100%; margin: 0; padding: 0;}
然后引入全局 （引入到min.js）
現(xiàn)在看效果
高度設(shè)置100%無(wú)效
場(chǎng)景：當(dāng)單頁(yè)面需要整個(gè)頁(yè)面填充顏色等操作，需要頁(yè)面高度為屏幕高度，設(shè)置height：100%無(wú)效
解決方法：在App.vue中設(shè)置height： 100%
//App.vue
html,body,#app {
?? ?height:100%;
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3 選中對(duì)話框時(shí)對(duì)話框右側(cè)出一個(gè)箭頭效果
本文主要介紹了Vue3實(shí)現(xiàn)選中對(duì)話框帶箭頭效果的方法,首先通過后臺(tái)獲取數(shù)據(jù)進(jìn)行遍歷,利用ts代碼判斷選中下標(biāo)與循環(huán)游標(biāo)是否一致以改變樣式,感興趣的朋友一起看看吧2024-10-10
Vue+ElementUI table實(shí)現(xiàn)表格分頁(yè)
這篇文章主要為大家詳細(xì)介紹了Vue+ElementUI table實(shí)現(xiàn)表格分頁(yè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
vue中關(guān)于template報(bào)錯(cuò)等問題的解決
這篇文章主要介紹了vue中關(guān)于template報(bào)錯(cuò)等問題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了解決elementui表格操作列自適應(yīng)列寬，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了在vue中使用scrollTo沒有效果的解決方法,本文給大家分享具體操作步驟,在這里需要注意scrollTo要作用在可滾動(dòng)的元素上,不然不生效,scrollTop就會(huì)一直為0,需要的朋友可以參考下2023-10-10
這篇文章主要為大家介紹了Vue之props 配置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助,希望能夠給你帶來(lái)幫助2021-11-11
這篇文章主要介紹了詳解vue的diff算法原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-05-05
基于VUE實(shí)現(xiàn)簡(jiǎn)單的學(xué)生信息管理系統(tǒng)
這篇文章主要介紹了VUE實(shí)現(xiàn)一個(gè)簡(jiǎn)單的學(xué)生信息管理系統(tǒng),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
本篇文章主要介紹了vue腳手架vue-cli的學(xué)習(xí)使用教程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-06-06
vue之a(chǎn)-table中實(shí)現(xiàn)清空選中的數(shù)據(jù)
今天小編就為大家分享一篇vue之a(chǎn)-table中實(shí)現(xiàn)清空選中的數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-11-11