vue+ElementPlus框架Container 布局容器不能鋪滿(mǎn)整個(gè)屏幕的解決方案

更新時(shí)間：2024年01月26日 12:11:10 作者：菜鳥(niǎo)搬磚ヽ(￣▽?zhuān)??

這篇文章主要介紹了vue+ElementPlus框架Container 布局容器不能鋪滿(mǎn)整個(gè)屏幕的解決方案,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

vue+ElementPlus框架Container 布局容器不能鋪滿(mǎn)整個(gè)屏幕

<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

直接使用ElementPlus框架的Container 布局容器，在頁(yè)面中沒(méi)有鋪滿(mǎn)，查看可知，有padding20px，高度也只有一半，因此添加了scc。

在這里插入圖片描述

.main {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

在這里插入圖片描述

.common-layout { height: 100vh; }

到此這篇關(guān)于vue+ElementPlus框架Container 布局容器不能鋪滿(mǎn)整個(gè)屏幕的文章就介紹到這了,更多相關(guān)vue Container 布局容器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue 如何開(kāi)啟或關(guān)閉熱更新
這篇文章主要介紹了vue 如何開(kāi)啟或關(guān)閉熱更新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
ElementUI中兩個(gè)Select選擇聯(lián)動(dòng)效果實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于ElementUI中兩個(gè)Select選擇聯(lián)動(dòng)效果實(shí)現(xiàn)的相關(guān)資料,在前端項(xiàng)目開(kāi)發(fā)中,經(jīng)常會(huì)遇到省市縣三級(jí)聯(lián)動(dòng)的下拉列表框組的問(wèn)題,需要的朋友可以參考下
2023-08-08
如何在Vue中獲取DOM元素的實(shí)際寬高
使用vue的時(shí)候,想要獲得一個(gè)指定的元素的高度時(shí),下面這篇文章主要給大家介紹了關(guān)于如何在Vue中獲取DOM元素的實(shí)際寬高的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
詳解如何使用vue實(shí)現(xiàn)頁(yè)面訪問(wèn)攔截
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)頁(yè)面訪問(wèn)攔截功能，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的可以了解一下
2023-08-08
vue 動(dòng)態(tài)生成拓?fù)鋱D的示例
這篇文章主要介紹了vue 動(dòng)態(tài)生成拓?fù)鋱D的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-01-01
Vue圖片裁剪組件實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Vue圖片裁剪組件的相關(guān)資料,本文介紹的組件是基于vue-cropper二次封裝,vue-cropper大家應(yīng)該都很熟悉了吧,需要的朋友可以參考下
2021-07-07
VUE 組件轉(zhuǎn)換為微信小程序組件的方法
這篇文章主要介紹了VUE 組件轉(zhuǎn)換為微信小程序組件的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-11-11
Vue3中按需引入ECharts詳細(xì)步驟(一看就會(huì))
新項(xiàng)目采用Vue3作為前端項(xiàng)目框架,避免不了要使用echarts,這篇文章主要給大家介紹了關(guān)于Vue3中按需引入ECharts的相關(guān)資料,需要的朋友可以參考下
2023-09-09
搭建vue開(kāi)發(fā)環(huán)境
這篇文章主要介紹了搭建vue開(kāi)發(fā)環(huán)境的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-07-07
Vue Element前端應(yīng)用開(kāi)發(fā)之功能點(diǎn)管理及權(quán)限控制
在一個(gè)業(yè)務(wù)管理系統(tǒng)中，如果我們需要實(shí)現(xiàn)權(quán)限控制功能，我們需要定義好對(duì)應(yīng)的權(quán)限功能點(diǎn)，然后在界面中對(duì)界面元素的功能點(diǎn)進(jìn)行綁定，這樣就可以在后臺(tái)動(dòng)態(tài)分配權(quán)限進(jìn)行動(dòng)態(tài)控制了，權(quán)限功能點(diǎn)是針對(duì)角色進(jìn)行控制的，也就是簡(jiǎn)稱(chēng)RBAC（Role Based Access Control）。
2021-05-05