Отрегулируйте карту в соответствии с высотой родительского контейнера

Question

У меня есть карта bootstrap с верхним и нижним колонтитулами и списком между ними. Я хочу, чтобы верхний и нижний колонтитулы были зафиксированы, а средняя часть была отрегулирована по высоте окна (тела), чтобы средняя часть могла иметь полосу прокрутки, если содержимое больше, чем тело страницы. Я мог сделать это только с фиксированной высотой в элементе ul, но я хочу, чтобы он покрывал высоту тела.

   <div class="card">
    	<div class="card-header">
    		Header title
    	</div>
    
    	<ul class="list-group list-group-flush" style="overflow-y: auto; height: 500px;">
    		<li class="list-group-item list-group-item-action"> one </li>
    		<li class="list-group-item list-group-item-action"> two </li>
    
    		...
    
    		<li class="list-group-item list-group-item-action"> n </li>
    	</ul>
    
    	<div class="card-footer">
    		Footer
    	</div>
    </div>

Answer 1

Вы можете использовать flexbox. Вот мой код.

.card{
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.card-header, .card-footer{
    height:200px;
}
.card ul{
    overflow-y: auto;
    max-height: 100%;
    height: 100%;
}

Итак, вы можете сделать ul, чтобы соответствовать росту, исключая верхний и нижний колонтитулы. И затем, если содержимое длинное, ul создаст полосу прокрутки.