CSS

Question

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

我想到了两个解决方案：

使用分页
使用溢出滚动

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

当我的购物车中只有 1 件产品时，由于产品下方空空的白色 space，我最终看起来很粗壮，这不是很好：

我的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;
}

所以我的问题是：

动态 re-size 模式的最佳方法是什么，这样它就不会以空 space 结束？

Answer 1

这可以通过使用属性 min-width and/or max-width:

来实现

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

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

现在 div 将始终为 100 像素高，除非有更多内容，这会拉伸 div。当达到200px想要滚动条的时候，可以加上overflow: auto.

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

CSS - Is it possible to have overflow scroll using a dynamic height?