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 占据容器的剩余高度。我试过自动，它似乎不起作用。非常感谢任何想法或提示。请注意，节元素可以垂直调整大小。标题将保持不变，但我希望 ol 占据容器高度的剩余部分。我想我可以用 javascript 完成，但这次我正在寻找一个纯 css 解决方案。谢谢你的帮助!

Answer 1

纯 CSS 解决方案:

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

即如果 <li>元素是4:

section ol li { height: 25% }

有效，我已经测试过了。