CSS - 是否可以使用动态高度进行溢出滚动？

Question

我有一个浮动模态购物车，位于我购物页面的顶部（metronic主题）。我面临的问题是，如果用户添加了太多产品，它就会从页面底部掉下来。

我想到了两个解决方案：

1. 使用分页
2. 使用溢出滚动

溢出滚动似乎是最明智的解决方案，尽管这是问题所在：

1. 当我在购物车中只有1件商品时，由于产品下面有空白空间，我最后看起来很粗糙，这不是很好：



我的CSS如下：

.cart-content-wrapper{
    position: absolute;
    right: -2px;
    top: 100%;
    z-index: 99999;
}
.cart-content {
    padding: 8px 0 10px;
    background: #fcfafb;
    border-top: solid 2px #ea4c1d;
    box-shadow: 5px 5px rgba(91, 91, 91, 0.2);
    width: 364px;
    margin-top: 12px;
    color: #717880;
    display: none;
    position: relative;
    overflow: scroll;
    overflow-x: hidden;
    height: 400px;
    transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
}
.cart-content:after { 
    top: -8px;
    width: 0; 
    height: 0;
    right: 8px;
    z-index: 2; 
    content: " "; 
    display: block; 
    position: absolute;
    border-bottom: 8px solid #e6400c;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

所以我的问题是：

1. 动态重新调整模态大小的最佳方法是什么，以便它不会以空白空间结束？

Answer 1

这可以通过使用属性min-width和/或max-width：

来实现

假设您希望高度始终至少为100px高，但绝不会超过200px：

div {
  min-height: 100px;
  max-height: 200px;
  height: auto; /* Not necessary as it is the default value */
}

现在div总是100px高，除非有更多的内容，这将拉伸div。达到200px并且您需要滚动条时，可以添加overflow: auto。