css - 高度 : 100% of remaining space in element with fixed height

Question

我已经使用固定高度和 overflow hidden 来绝对定位 div。我想放置一个列表，因此高度应为剩余高度的 100%。我想用纯 CSS 来做到这一点。这可能吗？

CODEPEN EXAMPLE

HTML

<div class="parent">
  <ul>
    <li>foo</li>
    <li>bar</li>
    // ...  
  </ul>
</div>

CSS

.parent {
  position: absolute;
  width: 50px;
  height: 50px;
  overflow: hidden;
  background: red;
}

.parent ul{
  background: green;
}

这是一张简单的图片，显示了剩余高度的 100% 的含义。

Answer 1

你想要它做什么？如果你想让它滚动然后试试这个

.parent {
  position: absolute;
  width: 100px;
  height: 150px;
  overflow: scroll;
  background: red;
} 
.parent ul {
  background: green;
}