element 高度问题

Question

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

Answer 1

如果您想要让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％，以确保父容器高度的撑满整个屏幕。

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