html - 根据父容器的高度调整一张卡片

Question

我有一张带有页眉、页脚和这两者之间的列表的引导卡。我想让页眉和页脚固定，中间部分调整到窗口（正文）的高度，这样如果内容大于页面正文，中间部分可以有滚动条。我只能在“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 将制作滚动条。