el-calendar日历单元格如何填满剩余空间

Question

在elementui样式基础上补充自己的样式

<style lang="scss">
.el-calendar {
  background: #ffffff;
  box-shadow: 0px 2px 4px 0px rgba(28, 41, 90, 0.04);
  border-radius: 10px;
}
.el-calendar__header {
  position: relative;
  padding: 0;
  border-bottom: none;
  .el-calendar__title {
    font-size: 26px;
    font-weight: 600;
    color: #636e95;
    line-height: 70px;
    width: 100%;
    text-align: center;
  }
  .el-calendar__button-group {
    position: absolute;
    width: 100%;
    .el-button-group > button {
      span {
        display: none;
      }
    }

    .el-button-group > button {
      position: absolute;
      top: 20px;
      font-family: 'element-icons' !important;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      border: 1px solid #d2d5e1;
      background: #fff !important;
      padding: 0;
      &:before {
        content: '';
        color: #636e95;
        font-size: 14px;
        font-weight: 600;
      }
    }
    .el-button-group > button:nth-child(2) {
      display: none;
    }
    .el-button-group > button:nth-child(1) {
      left: 20px;
      &:before {
        content: '\e6de';
      }
    }
    .el-button-group > button:last-child {
      right: 20px;
      &:before {
        content: '\e6e0';
      }
    }
  }
}
.el-calendar-table thead th {
  color: #97a0c3;
  padding: 0 0 16px;
  font-size: 15px;
  border-bottom: 1px solid #eaedf7;
  &:before {
    content: '周';
    // color: #000;
  }
}
.el-calendar-table tr td:first-child,
.el-calendar-table tr:first-child td,
.el-calendar-table td {
  border: none;
  border-radius: 4px;
  .bookings {
    p {
      margin: 0;
      margin-bottom: 10px;
      font-size: 15px;
      color: #636e95;
      line-height: 21px;
      text-align: center;
    }
  }
}
.el-calendar-table .el-calendar-day {
  padding: 0;
  min-height: 150px;
  height: auto;
  .calendar-day {
    text-align: center;
    color: #242f57;
    line-height: 26px;
    padding-top: 24px;
    font-size: 22px;
  }
}
.el-calendar__body {
  padding-top: 0;
  padding-bottom: 20px;
}
.el-calendar-table:not(.is-range) td.prev,
.el-calendar-table:not(.is-range) td.next {
  color: #c0c4cc;
  display: none;
}
.el-calendar-table:not(.is-range) td.prev {
  visibility: hidden;
  display: table-cell;
}
.el-calendar-table td.current.is-selected {
  background: linear-gradient(90deg, #ef8d82 0%, #f95b49 100%);
  border-radius: 4px;
  .calendar-day {
    color: #fff !important;
  }
}
.el-calendar-table td:hover {
  background: rgba(239, 141, 130, 0.15);
  border-radius: 4px;
}
.el-calendar-table .el-calendar-day:hover {
  background: none;
}

.el-calendar-table td.is-selected,
.el-calendar-table td.is-selected:hover {
  .el-calendar-day {
    background: linear-gradient(90deg, #ef8d82 0%, #f95b49 100%);
    border-radius: 4px;
    .calendar-day {
      color: #fff !important;
    }
    .bookings {
      p {
        color: #fff;
      }
    }
  }
}
</style>

Answer 1

看上去默认样式就是这样的呀 http://jsrun.net/I93Kp/edit。... td 的话，本来就是会强制对其的。

剩下就是高度的问题了，解开限制即可。或者做个小滚动条都可以。

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。