element使main主内容区域撑满高度

原创已于 2023-03-21 22:33:18 修改 · 3.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html #element

于 2023-03-21 22:32:21 首次发布

前端专栏收录该内容

42 篇文章

订阅专栏

文章介绍了如何通过设置外部container的高度为100vh和el-main的align-items为stretch，使得Main区域在页面中撑满剩余高度，同时提供了相应的HTML模板和CSS样式代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本次使用的是这个布局
在这里插入图片描述

我们让Main区域撑满余下高度，只需要给最外层的container加一个高度是height: 100vh;，el-main标签所在的class加一个align-items: stretch;撑满父容器高度，代码如下

<template>
    <el-container class="outside-container">
        <el-header>
            <FHeader />
        </el-header>
        <el-container>
            <el-aside width="200px">
                <FMenus />
            </el-aside>
            <el-main>
                <FTagList />
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<style>
 .outside-container{
        height: 100vh;
        background-color: red;
    }
    .el-main{
        background-color: skyblue;
        align-items: stretch;
    }
   
</style>