高度：具有固定高度的元素中剩余空间的100％

Question

我绝对定位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

你想要它做什么？如果你想要它滚动，那么试试这个

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;