el-container布局顶栏和侧边栏固定，右侧主体内容区域可滚动

永远不会太晚

已于 2022-02-22 10:57:47 修改

阅读量3.1k

点赞数 14

文章标签： vue.js css 前端

于 2021-09-03 17:50:31 首次发布

本文链接：https://blog.csdn.net/qq_42611074/article/details/120087205

版权

博主分享了一段关于如何使用一行CSS代码简洁实现页面顶部和侧边栏固定，主要内容区域可滚动的布局技巧。通过设置`.content`的`height: calc(100vh - 90px);`，消除了以往需要复杂定位的问题，简化了前端页面布局的工作。

摘要由CSDN通过智能技术生成

偶然看到很久以前做的笔记，当时实现顶部和侧边栏固定，右侧主体内容区域可滚动这个需求写了好多css，又是相对定位，又是绝对定位，时隔半年后再看，完全没有必要这么麻烦。

一行 height: calc(100vh - 90px); 结束战斗

<template>
    <el-container>
        <el-header height="90px">
        </el-header>
        <el-container class="content">
            <el-aside width="90px">
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>

</template>
<script>
export default {

};
</script>

<style>
.el-header {
    background: skyblue;
}
.el-aside {
    background: #ff9569;
}
.content {
    height: calc(100vh - 90px);
}
</style>