el-scrollbar 高度自适应

el-scrollbar 是 Element UI 提供的一个滚动条组件，用于在需要滚动内容的容器中添加滚动条。要实现 el-scrollbar 的高度自适应，可以通过以下步骤进行操作：

1. 首先，确保你已经正确引入了 Element UI 的相关组件和样式。

2. 在需要添加滚动条的容器元素上，添加一个固定高度的样式，例如设置一个固定的高度值或者使用百分比来设置高度。

3. 在容器元素内部，使用 el-scrollbar 组件包裹需要滚动的内容。

4. 设置 el-scrollbar 组件的高度为100%。这样 el-scrollbar 组件会根据容器元素的高度自适应，并显示相应的滚动条。

下面是一个示例代码：

<template>
  <div class="container">
    <el-scrollbar style="height: 100%;">
      <!-- 需要滚动的内容 -->
    </el-scrollbar>
  </div>
</template>

<style>
.container {
  height: 300px; /* 设置容器的固定高度 */
}
</style>

这样，el-scrollbar 组件就会根据容器的高度自适应，并在内容溢出时显示滚动条。

相关问题

vue3 el-scrollbar 自适应高度

Vue3的el-scrollbar是一个自定义滚动条组件，用于在Vue应用中实现自适应高度的滚动条效果。

在Vue3中，可以使用el-scrollbar组件来实现自适应高度的滚动条。首先，需要在Vue项目中引入el-scrollbar组件，可以通过npm或者CDN的方式引入。

接下来，在需要使用滚动条的组件中，可以使用el-scrollbar组件来包裹需要滚动的内容。例如：

<template>
  <el-scrollbar :auto-height="true">
    <!-- 需要滚动的内容 -->
    <div>
      <!-- 内容 -->
    </div>
  </el-scrollbar>
</template>

在上述代码中，使用了el-scrollbar组件，并通过`:auto-height="true"`来设置自适应高度。这样，当内容超出el-scrollbar的高度时，会自动显示滚动条。

需要注意的是，el-scrollbar组件需要配合element-ui或者其他UI库一起使用，确保正确引入相关样式和组件。

修改.el-scrollbar .el-scrollbar__wrap .el-scrollbar__view高度为100%

要将.el-scrollbar .el-scrollbar__wrap .el-scrollbar__view的高度修改为100%，可以在CSS中添加以下样式：

.el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
  height: 100%;
}

这将把.el-scrollbar .el-scrollbar__wrap .el-scrollbar__view的高度设置为其父元素的高度，即100%。