如何使用 element-ui 制作带有固定侧边菜单的固定标题答案

【问题标题】：How to make a fixed header with a fixed side menu with element-ui如何使用 element-ui 制作带有固定侧边菜单的固定标题
【发布时间】：2020-02-18 02:18:09
【问题描述】：

我也想用一个固定的菜单制作一个固定的标题，标题在顶部，菜单占据页面的其余部分，这是我的布局 vue 文件的当前代码。

目前我的标题很好，但菜单不是页面其余部分的完整高度。我怎样才能使菜单工作并固定在一边，而不是奇怪而不是不正确的大小，我试图添加一个固定的高度，然后我得到了一个我不想要的奇怪的少量滚动。

这样做的正确方法是什么？

<template>
    <el-container class="main-layout">
        <el-header>
            <el-row style="margin-top: 0.5%">
                <el-col>
                    <el-dropdown trigger="click" class="fa-pull-right">
                        <el-button
                            class="logout"
                            icon="el-icon-arrow-down">
                            user
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <a href="/logout">
                                <el-dropdown-item>Logout</el-dropdown-item>
                            </a>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-row>
        </el-header>
        <el-aside class="el-menu-layout" style="padding: 0; width: auto;">
            <el-menu :gutter="8" :xs="2" :label="true" @open="handleOpen" @close="handleClose"
                     :collapse="collapse()"
                     :unique-opened="true"
                     style="height: 100%">
                <el-menu-item>
                    <i class="fas fa-user"></i>
                    User
                </el-menu-item>
            </el-menu>
        </el-aside>
        <div class="main-container">
            <slot class="mt-1"></slot>
        </div>
    </el-container>
</template>

这是我在这里提到的类的 css

.el-menu-layout {
    background: $gray-1 !important;
    position: absolute !important;
    left: 0;
    margin-top: 60px;
}

.el-header {
    background-color: white;
    height: 12%;
    top: 0;
    left: 0;
}

【问题讨论】：

标签： laravel vue.js element-ui

【解决方案1】：

使用position:fixed，您可以放置一些固定的东西，请记住，您还必须设置父元素的位置。 CSS应该是这样的：

.main-layout {
  position: relative;
}

.el-menu-layout {
    position: fixed;
    background: grey !important;
    left: 0;
    margin-top: 60px;
}

.el-header {
    position: fixed;
    background-color: white;
    height: 12%;
    top: 0;
    left: 0;
   right: 0;
}

.main-container {
  margin-top:60px;
  margin-left: 100px;
}

【讨论】：