html - 获取内联 block div 以填充父级的高度

Question

我想要两个 div 完全延伸到容器的高度。不知道为什么这如此困难，但我已经尝试了一些事情并且似乎无法在这个 question 中复制解决方案。 .

这是一个 fiddle

li {
  width: 200px;
  background-color: white;
  height: 35px;
  display: block;
}
.outer {
  height: 100%;
  background-color: gray;
  display: table;
}
.filter-button-name {
  background-color: lightblue;
  display: table-cell;
  height: 100%;
}
.filter-number-label {
  background-color: pink;
  color: purple;
  display: table-cell;
  height: 100%;
}

<li class="filter-item">
  <div class="dropdown">
    <div class="outer">
      <div class="filter-button-name">
        <span>Status</span>
      </div>
      <div class="filter-number-label">
        <span class="label">4</span>
      </div>
    </div>
  </div>
</li>

任何帮助都会很棒。谢谢。

Answer 1

你错过了这个:

.dropdown { height: 100%; }

Revised Fiddle

在非绝对定位的元素上使用百分比高度时，您还需要在父元素上设置高度。请参阅:Working with the CSS height property and percentage values