Question

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

这里是fiddle

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

你错过了这个：

.dropdown { height: 100%; }

Revised Fiddle

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

获取内联块div以填充父级的高度

1 个答案: