css высота вопроса. У меня есть элемент section с фиксированной высотой, я хочу, чтобы 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 занять оставшуюся высоту контейнера.Я пробовал авто, и это не похоже на работу.Любые идеи или советы с благодарностью.Обратите внимание, что размер элемента section может быть изменен по вертикали.заголовок останется неизменным, но я хочу, чтобы ol взял оставшуюся часть высоты контейнера.Я думаю, что я могу сделать это с помощью JavaScript, но на этот раз я ищу чистое решение CSS.Спасибо за любую помощь!

Answer 1

Чистое решение CSS:

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

, т.е. если <li> элементов 4:

section ol li { height: 25% }

Работает, я протестировал его.