Как сделать фиксированный заголовок с фиксированным боковым меню с помощью element-ui - PullRequest
Новая
       7

Как сделать фиксированный заголовок с фиксированным боковым меню с помощью element-ui

0 голосов
/ 22 октября 2019

Я хочу также создать фиксированный заголовок с фиксированным меню, причем заголовок находится сверху, а меню занимает остальную часть высоты страницы, это мой текущий код для моего файла макета 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;
}

1 Ответ

0 голосов
/ 29 октября 2019

С помощью 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;
}
...