css 高度问题。我有一个固定高度的部分元素，我希望 ol 占据其余的高度变化

Question

我有以下html

<section>
  <header>some controls in here</header>
  <ol>varying number of <li></ol>
<section>

和下面的CSS

section { height: 300px, max-height: 600px}

我没有在页眉上设置高度。默认情况下它是自动的或者可能是继承的。无论如何，我怎样才能让 OL 占据容器的剩余高度。我试过 auto，但它似乎不起作用。非常感谢任何想法或提示。请注意，section 元素可以垂直调整大小。标题将保持不变，但我希望 ol 占据容器高度的其余部分。我想我可以用 javascript 完成，但这次我正在寻找纯 css 解决方案。感谢您的帮助!

Answer 1

纯 CSS 解决方案:

section ol li { height: 100 / [number of <li> elements] % }

即如果<li>元素是 4:

section ol li { height: 25% }

有效，我已经测试过了。