html - 如何在不使用百分比的情况下将div高度设置为与父容器相同？

Question

我正在使用一个名为 angular-split 的 Angular 插件，它提供了一个分隔线来分割 html 页面上可调整大小的部分。

问题是如果你想分割一些东西，包含gutter的div必须设置一个特定值的高度，而不是百分比。

所以我的问题是，如果我希望我的 div 在不使用 height=100% 的情况下完全填充父容器，我该怎么办？

Answer 1

那些 div 是否与 child div 一起单独设置样式，如果是这样，您可以通过更改父子的 display 来实现元素。无需将 height 分配给子元素，它默认为父元素的 100%。

检查下面的代码，红色 div 是父 div，蓝色是一个 child 。

#parent {
  width: 100%;
  height: 400px;
  background: red;
  display: table;
  color: white;
  padding-top: 10px;/*Optional*/
}

#parent .child {
  width: 100%;
  height: auto;
  background: blue;
  display: table-cell;
}

<div id="parent">
  <div class="child">
    Child
  </div>
</div>