Vue使用el-container布局，mian下的子页面的el-card样式变化，怎样调整成原来的样子

Question

在代码中加入el-container布局后，子页面的el-card样式变化了，高度莫名的变得很高，但是改不回来，请问各位这是为什么呀
多谢各位的帮忙啦!

<!-- 这是父页面的调用子页面的main布局部分,在这里加了router-view来实现调用 -->
<el-main style="margin-top: 460px">
                <el-card style="margin-top:20px; padding:10px; width:60%;">
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                        <el-menu-item index="1" style="font-size:20px"><router-link :to="{name: 'CourseCatalogue'}">目录</router-link></el-menu-item>
                        <el-menu-item index="2" style="font-size:20px"><router-link :to="{name: 'CourseNote'}">笔记</router-link></el-menu-item>
                        <el-menu-item index="3" style="font-size:20px"><router-link :to="{name: 'CourseTest'}">测验与作业</router-link></el-menu-item>
                    </el-menu>
                    <div>
                    <router-view></router-view>
                    </div>
                </el-card>
            </el-main>

<!-- 这是子页面的代码部分 -->
<template>
<div>
    <div>
        <el-card v-for="item in note" :key="item" style="margin-top:20px;width:480px;height:100%;">
            <div slot="header">
                <span>第几节课的笔记</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="editofthenode(item)">编辑</el-button>
            </div>
            <div>
                <div v-for="item1 in item.nodetext" :key="item1" class="text item">
                    {{ item1.text }}
                </div>
            </div>
        </el-card>
        <el-button icon="el-icon-circle-plus-outline" style="font-size:15px; margin-top:20px;" @click="addnote()" circle ></el-button>
    </div>
        <el-dialog :title=note[this.index].name :visible.sync="dialogFormVisible">
            <el-form :model="form" style="width:80%;margin-left:10%" >
                <el-form-item v-for="item in note[index].nodetext" :key="item">
                    <el-input type="text" :value=item.text></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="edit()">确 定</el-button>
            </div>
        </el-dialog>
</div>
</template>

我现在的样子:

原本想实现的样子:

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

可能是因为el-container的默认高度被充满，导致子页面的el-card也继承了该高度。可以尝试通过调整el-container的高度来解决问题。另外，可以在子页面的el-card上设置max-height属性来限制其高度。 示例代码： 父页面：

<el-container>
  <el-header>Header</el-header>
  <el-main>
    <router-view></router-view>
  </el-main>
  <el-footer>Footer</el-footer>
</el-container>

子页面：

<template>
  <div>
    <el-card style="max-height: 500px;">
      <!-- card内容 -->
    </el-card>
  </div>
</template>