div不会填满父div高度的高度

Question

我使用less作为样式语言。在尝试这个问题之前，我尝试将身高设置为100％，我失败了。

<style scoped rel="stylesheet/less" lang="less">

  @border: 1px solid #dddee1;
  .cal-div {
    margin: 20px 0;
    border: @border;

    .cal-circle {
      display: inline-block;
      vertical-align: middle !important;
    }

    .res-show {
      margin-left: 20px;
      display: inline-block;
      vertical-align: middle !important;
    }

  }

  .discount-items-gather {
    border: @border;

  }
  ...

</style>

这是我的HTML代码：

        <Row>
        <Col span="8">
          <div class="cal-div">
            <div class="cal-circle">
              <i-circle :percent="left_percent">
                <span style="font-size:24px">{{ left_percent }}%</span>
              </i-circle>
            </div>

            <div class="res-show">
              ....
            </div>
          </div>
          </Col>

          <Col span="5">
          <div class="cal-test">
            <div>
              .....
            </div>
          </div>
          </Col>

          <Col span="11">
          <div class="discount-items-gather">
            ...
          </div>
          </Col>
        </Row>

结果是这样的：

您可以看到我的快照。

这不是我的要求，我希望边框的高度填充外部div的高度。

我尝试添加height: 100%;，但不适合我。

Answer 1

您需要为父div指定一个特定的高度。只有这样，css“height：100％”才能用于内部div。