vue+elementUI 實(shí)現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的示例
步驟很簡單:
通過動態(tài)綁定屬性給<el-main></el-main>綁定高度,而高度通過 innerHeight 獲取,減去你的頭部和底部高度,剩下的就是整個內(nèi)容區(qū)域的高度了!話不多說,上代碼
//defaultHeight是綁定的屬性 <el-main :style="defaultHeight"> <router-view /> </el-main> //注意:這里的defaultHeight必須是對象,不懂的可以去官網(wǎng)看下api data() { return { defaultHeight: { height: "" } }; }, methods: { //定義方法,獲取高度減去頭尾 getHeight() { this.defaultHeight.height = window.innerHeight - 90 + "px"; } }, created() { //頁面創(chuàng)建時執(zhí)行一次getHeight進(jìn)行賦值,順道綁定resize事件 window.addEventListener("resize", this.getHeight); this.getHeight(); }
當(dāng)然,還可以通過CSS3計算高度
<style> .el-main { height: calc(100vh - 70px); } </style>
以上就是vue+elementUI 實(shí)現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的示例的詳細(xì)內(nèi)容,更多關(guān)于vue+elementUI 實(shí)現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
詳解vue3+element-plus實(shí)現(xiàn)動態(tài)菜單和動態(tài)路由動態(tài)按鈕(前后端分離)
本文需要使用axios,路由,pinia,安裝element-plus,并且本文vue3是基于js而非ts的,這些環(huán)境如何搭建不做描述,需要讀者自己完成,感興趣的朋友跟隨小編一起看看吧2023-11-11Vue.js 實(shí)現(xiàn)地址管理頁面思路詳解(地址添加、編輯、刪除和設(shè)置默認(rèn)地址)
這篇文章主要介紹了Vue.js 實(shí)現(xiàn)地址管理頁面的思路(地址添加、編輯、刪除和設(shè)置默認(rèn)地址),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12vue利用全局導(dǎo)航守衛(wèi)作登錄后跳轉(zhuǎn)到未登錄前指定頁面的實(shí)例代碼
這篇文章主要介紹了vue利用全局導(dǎo)航守衛(wèi)作登錄后跳轉(zhuǎn)到未登錄前指定頁面,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05Vue安裝sass-loader和node-sass版本匹配的報錯問題
這篇文章主要介紹了Vue安裝sass-loader和node-sass版本匹配的報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04