element 高度问题

img

img


这个el main里面的高度 怎么设置为100%,el main,padding 20px,但是elmain下边没有padding

如果您想要让el-main组件的高度设置为100%,并让底部没有padding,请尝试以下代码:

<template>
  <div class="container">
    <el-main class="main-content"></el-main>
  </div>
</template>

<style>
  .container {
    height: 100%;
  }
  .main-content {
    height: calc(100% - 40px);
    padding: 20px;
    box-sizing: border-box;
  }
</style>

在上面的代码中,我们使用calc函数来计算el-main组件的高度,它减去底部的20像素填充和20像素顶部填充。 box-sizing:border-box属性可以确保填充和边框不会影响元素的总宽度和高度。最后,将容器的高度设置为100%,以确保父容器高度的撑满整个屏幕。

希望这个解决方案对您有所帮助。