Как я могу заставить div занимать все оставшееся пространство окна? [дубликат] ⇐ CSS

[Anonymous]

Я пытаюсь создать страницу, на которой есть заголовок, а содержимое занимает остальную часть страницы. Затем это содержимое разделяется на две части, разделенные по горизонтали, одна из которых прокручивается, но имеет постоянное соотношение сторон, высоту, которая находится между полосой заголовка и нижней частью окна, и ширину, регулируемую соответствующим образом.
В настоящее время я пытаюсь установить подходящую высоту для контейнера содержимого, гарантируя, что он занимает пространство между нижней частью заголовка и нижней частью окна. Однако я не могу добиться, чтобы это происходило динамически.
Это пример макета, который я пытаюсь создать.
В коде, который я включил ниже, я установил его высоту на постоянное количество пикселей, чтобы продемонстрировать, как я хотел, чтобы оно выглядело для моего размера окна в данный момент.
Я попробовал установить высоту на 100%, но в результате высота контейнера содержимого была установлена ​​на значение высота всего родителя, а не только оставшаяся высота родителя. Я также пробовал использовать flex, но это просто расширило контейнер содержимого до высоты его содержимого.
Что мне для этого нужно сделать?








body {
margin: 0;
}

#app {
height: 100vh;
}

#header-bar-container {
background-color: orange;
}

#header-bar-contents {
height: 90px;
}

#content-container {
height: 422px;
background-color: grey;
display: flex;
}

#input-container {
flex: 1 0 auto;
overflow-y: scroll;
}

#some-inputs {
height: 1000px;
}

#chord-sheet-preview-container {
background-color: yellow;
padding: 1rem;
display: flex;
}

#chord-sheet-preview {
background-color: white;
margin: 0;
aspect-ratio: 0.7071;
padding: 1cm;
background: white;
}







Header





Inputs




Some chords.








Подробнее здесь: https://stackoverflow.com/questions/797 ... -of-window