Div高度设置为div宽度加上额外百分比

Question

我正在使用Bootstrap和Less构建日历（实际上使用带有less，mizzao:bootstrap-3和html5cat:bootstrap-material-design软件包的Meteor JS。我有这样定义的日历.less文件：

/*****************************************************************************/
/* Calendar: Style */
/*****************************************************************************/

@cal-min-width: 320px;
@number-of-days: 7;
@column-width: percentage(1/@number-of-days);
@column-height: XXX;  // Not sure what to do here...


.row:before {
  display: table;
  content: " ";
}

.grid-calendar {
  min-width: @cal-min-width;
  .row {
    /*
    override these from bootstrap

    margin-right: -15px;
    margin-left: -15px;
    */
    margin: 0;

  }

  .calendar-week .grid-cell {
    background-color: #f6f6f6;
    border: 1px solid #fff;
  }

  .calendar-week-header .grid-cell > div > div {
    padding-bottom: 10px;
    height: auto;
  }

  .grid-cell {
    display: inline-block;
    float: left;
    min-height: 1px;
    padding: 0;
    position: relative;
    width: @column-width;

    &.previous-month {
      color: #a6a6a6;
    }

    &.next-month {
      background-color: #e1e1e1;
    }

    > div {
      display: flex;
      justify-content: center;
      width: 100%;

      > div {
        height: 0;
        padding: 50% 0;
      }
    }
  }
}

这里只有一周的快速示例HTML：

<div class="row">
  <div class="grid-calendar">
    <div class="row calendar-week-header">
      <div class="col-xs-1 grid-cell calendarSunday">
        Sun
      </div>
      <div class="col-xs-1 grid-cell calendarMonday">
        Mon
      </div>
      <div class="col-xs-1 grid-cell calendarTuesday">
        Tues
      </div>
      <div class="col-xs-1 grid-cell calendarWednesday">
        Wed
      </div>
      <div class="col-xs-1 grid-cell calendarThursday">
        Thur
      </div>
      <div class="col-xs-1 grid-cell calendarFriday">
        Fri
      </div>
      <div class="col-xs-1 grid-cell calendarSaturday">
        Sat
      </div>
    </div>
    <div class="row calendar-week">
      <div class="col-xs-1 grid-cell">
        31
      </div>
      <div class="col-xs-1 grid-cell">
        1
      </div>
      <div class="col-xs-1 grid-cell">
        2
      </div>
      <div class="col-xs-1 grid-cell">
        3
      </div>
      <div class="col-xs-1 grid-cell">
        4
      </div>
      <div class="col-xs-1 grid-cell">
        5
      </div>
      <div class="col-xs-1 grid-cell">
        6
      </div>
    </div>
  </div>
</div>

到目前为止看起来还不错，但我需要让.grid-cell的高度合适。我想要做的是将@column-height定义为与宽度加一些百分比相同，这样当宽度响应变化时，单元格的高度也会发生变化。但@ column-width设置为百分比，而不是像素大小。我的后备可能是使用媒体查询根据屏幕宽度降低高度，但我宁愿让它更流畅。