el-card高度溢出怎么解决

Question

<template>
  <el-card style="min-height: 100%">
    <div slot="header" class="clearfix">
      <span>添加栏目</span>
    </div>
    <div>
      <el-scrollbar>
        <el-form label-width="200px">
          <el-col :span="16"
            ><el-form-item label="栏目名称">
              <el-input></el-input> </el-form-item
          ></el-col>
          <el-col :span="16"
            ><el-form-item label="索引名称">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16"
            ><el-form-item label="栏目描述">
              <el-input></el-input> </el-form-item
          ></el-col>
          <el-col :span="16"
            ><el-form-item label="栏目关键字">
              <el-input></el-input> </el-form-item
          ></el-col>
          <el-col :span="16">
            <el-form-item label="栏目图片">
              <el-upload action="">
                <el-button plain>选取图片</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="栏目组">
              <el-select>
                <el-option></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="16">
            <el-col :span="6">
              <el-form-item label="添加栏目">
                <el-switch></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="添加内容">
                <el-switch></el-switch>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="16">
            <el-form-item label="栏目内容"> </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="栏目内容"> </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="栏目内容"> </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item style="display: flex; justify-content: flex-end">
              <el-button type="primary">立即添加</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-scrollbar>
    </div>
  </el-card>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import BaseView from "@/views/baseView";
import canAccessView from "@/utils/accessCheck";
import { ApiDescription, HttpMethod } from "@/utils/apiDescription";

@Component({
  components: {},
})
export default class add extends BaseView {}
</script>

<style lang="scss" scoped>
.el-col {
  height: 100%;
}
</style>

右边卡片高度溢出怎么解决，要与左边的卡片高度相等？

Answer 1

• 这篇博客也许可以解决你的问题👉 ：el-card实现菜单栏效果