Bootstrap4如何实现内容少时自适应高度、内容过多时出滚动条的容器

问题原因 #

你当前为.domain-list设置了固定高度height: 30em，该属性会强制容器高度始终保持为30em，和内部内容高度无关，因此内容较少时就会出现多余的垂直空白。

解决方案 #

将固定高度属性替换为最大高度属性即可，修改后的CSS如下：

.domain-list {
  max-height: 30em;
}

实现逻辑 #

• max-height: 30em只会限制容器的最大高度不超过30em，当内部内容高度小于30em时，容器会自动适配内容的实际高度，消除多余空白
• 配合你已经添加的Bootstrap 4自带类overflow-auto，当内部内容高度超过30em时，会自动触发纵向滚动条，完全符合你需要的效果

该方案无需修改现有HTML结构，兼容所有支持Bootstrap 4的浏览器。

内容的提问来源于stack exchange，提问作者jhutar