javascript - 如何扩展 DIV 以使用整个父 DIV 高度

Question

我有这个 HTML 结构:

<div class="right_col" role="main" style="min-height: 647px;">
  <div class="fill">
    <div class="page-title"></div>
    <div class="clearfix"></div>
    <div class="row"></div>
  </div>
</div>

“填充”类是:

.fill {
    min-height: 100%;
    height: 100%;
    box-sizing: border-box;
}

但是，具有“fill”类的 DIV 不会扩展到其父级，其最小高度为 647px。有办法解决吗？

Answer 1

你可以使用 flex;

.right_col {
  min-height: 647px;
  display: flex;
}

.fill {
  flex: 1;
  background: gray;/* see me */
  box-sizing: border-box;
}

<div class="right_col" role="main">
  <div class="fill">
    <div class="page-title">t</div>
    <div class="clearfix">clr</div>
    <div class="row">r</div>
  </div>
</div>