Vue中的el-main组件：如何设置固定大小，轻松实现滚动条显示

摆脱页面撑大困扰：赋予 el-main 固定大小

引言

在 Vue 项目中使用 el-main 组件作为布局容器时，您可能遇到过这种情况：内容不断增加，导致页面撑大，没有滚动条，用户无法滚动内容。这不仅影响了网站的美观，还让用户感到困惑和不便。

妙招来袭：全局设置 el-main 固定高度，滚动条随心所欲

为了让 el-main 组件拥有固定高度并自动显示滚动条，我们可以通过 CSS 样式进行全局设置。

在项目的 style.css 文件中添加如下样式：

.el-main {
  height: calc(100vh - 60px);
  overflow: auto;
}

在这个样式中，我们使用了 calc() 函数来计算 el-main 组件的高度，使其减去导航栏的高度（假设为 60px），以确保 el-main 组件占据整个视窗的高度，同时设置 overflow: auto; 属性，让多出的内容自动出现滚动条。

代码示例：一步步实现 el-main 滚动条

以下是一个简单的 Vue 组件示例，展示了如何使用 el-main 组件并设置固定高度，让内容多出部分自动出现滚动条：

<template>
  <div class="container">
    <el-container>
      <el-aside>侧边栏</el-aside>
      <el-main>
        <!-- 这里放置主内容 -->
        <p>这是主内容</p>
        <p>这是主内容</p>
        <p>这是主内容</p>
        <p>这是主内容</p>
        <p>这是主内容</p>
        <p>这是主内容</p>
        <p>这是主内容</p>
        <p>这是主内容</p>
        <p>这是主内容</p>
        <p>这是主内容</p>
      </el-main>
    </el-container>
  </div>
</template>

<style>
.container {
  height: 100vh;
}

.el-main {
  height: calc(100vh - 60px);
  overflow: auto;
}
</style>

在这个示例中，我们首先定义了一个 container 容器，然后在容器内使用 el-container 组件作为布局容器，其中包含一个 el-aside 组件作为侧边栏和一个 el-main 组件作为主内容区域。

在 el-main 组件内，我们放置了大量的内容，以模拟实际项目中的情况。为了让 el-main 组件拥有固定高度并自动显示滚动条，我们在 style 标签中设置了相关的 CSS 样式。

结语：挥别页面撑大烦恼，让 el-main 随心滚动

通过以上的设置，当内容超出 el-main 组件的高度时，多出的内容将自动出现滚动条，让页面布局更加美观，内容更易读。告别页面撑大的烦恼，让 el-main 组件随心滚动，让您的 Vue 项目更加专业和用户友好。

常见问题解答

1. 为什么我的 el-main 组件没有出现滚动条？
   确保您已正确设置了 CSS 样式，并且内容已超出 el-main 组件的高度。

2. 我可以设置 el-main 组件的自定义高度吗？
   可以，您可以在 CSS 样式中使用 height 属性设置自定义高度，但请确保高度与您的页面布局相匹配。

3. 滚动条总是出现在 el-main 组件中，即使内容没有超出？
   检查 overflow 属性是否已正确设置为 auto。如果设置了其他值，则滚动条可能会始终可见。

4. 如何在 el-main 组件中禁用滚动条？
   将 overflow 属性设置为 hidden 即可禁用滚动条。但是，这可能会导致内容被截断，因此请谨慎使用。

5. 是否可以为 el-main 组件添加自定义滚动条样式？
   可以，您可以在 CSS 样式中使用::-webkit-scrollbar 伪类选择器来自定义滚动条的外观。