html - CSS 仅在必要时溢出

标签 html css magento

我的商店里有一个迷你推车，可以展示购物篮中的所有产品。我试图让购物车的滚动条在购物车中有很多产品时出现，因此您需要滚动才能看到所有产品，以便购物车保留在页面上。

但是，即使不需要，滚动条也始终存在，我无法弄清楚如何阻止它发生。请看下图:

这是控制购物车的 CSS:

/* Header Cart */
.minicart-wrapper {/*float: right;*/ position: relative; display: inline-block; vertical-align: middle;}



.minicart-wrapper .title-cart .cart-indicator {
  position: absolute;
  bottom: 5px;
}
.minicart-wrapper .title-cart .counter.empty .cart-full-indicator {display: none;}
.minicart-wrapper .title-cart .counter.empty .cart-indicator,
.minicart-wrapper .title-cart .counter.empty .cart-full-indicator,
.minicart-wrapper .title-cart .counter.empty .cart-full-indicator:after,
.minicart-wrapper .title-cart .counter.empty .cart-full-indicator:before {
  background-color: rgba(0,0,0,0.2);
}
.minicart-wrapper .title-cart .cart-full-indicator {
    bottom: 13px;
    display: block;
}
.minicart-wrapper .title-cart .cart-indicator,
.minicart-wrapper .title-cart .cart-full-indicator,
.minicart-wrapper .title-cart .cart-full-indicator:after,
.minicart-wrapper .title-cart .cart-full-indicator:before {
  position: absolute;
  width: 18px;
  height: 2px;
  left: 50%;
  margin-left: -9px;
  background-color: #eee;
}
.minicart-wrapper .title-cart .cart-full-indicator:after,
.minicart-wrapper .title-cart .cart-full-indicator:before {
    display: block;
    content: ''
}
.minicart-wrapper .title-cart .cart-full-indicator:before {
    top: -4px
}
.minicart-wrapper .title-cart .cart-full-indicator:after {
    bottom: -4px
}
.minicart-wrapper .title-cart .counter.empty .counter-number,
.minicart-wrapper .title-cart .counter.empty .divider,
.minicart-wrapper .title-cart .counter.empty .caret,
.minicart-wrapper .title-cart .counter.empty .subtotal {display: none;}
.minicart-wrapper .title-cart {
    padding: 10px 8px;
    transition: background-color 300ms ease;
    -moz-transition: background-color 300ms ease;
    -webkit-transition: background-color 300ms ease;
    display: block;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}
.minicart-wrapper .title-cart .cart-right-items {display: inline-block; vertical-align: middle;}
.minicart-wrapper .title-cart .icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    position: relative;
    height: 40px;
    line-height: 40px;
    width: 40px;
    text-align: center;
    /*background-color: #000000;*/
    color: #fff;
    border-radius: 50%;
    overflow: hidden;
    z-index: 0;
}
/*.minicart-wrapper .title-cart .icon:after {
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #222;
    z-index: -1;
    opacity: 0;
    -webkit-transform: scale3d(0.56, 1, 1);
    transform: scale3d(0.56, 1, 1);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
    transition: transform 0.4s, opacity 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}*/
.minicart-wrapper .title-cart.active,
.minicart-wrapper .title-cart:hover {
    opacity: 1;
}
.minicart-wrapper .title-cart.active .icon:after,
.minicart-wrapper .title-cart:hover .icon:after {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.minicart-wrapper .title-cart .icon i {
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    /*margin-top: 2px;*/
    color: #fff;
}
.minicart-wrapper .title-cart .counter.empty .icon {margin-right: 0;}
.minicart-wrapper .title-cart .text {
    display: none;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1;
    margin-bottom: -4px;
}
.minicart-wrapper .title-cart .subtotal .label,
.minicart-wrapper .title-cart .counter-label {display: none; color: #fff; }
.minicart-wrapper .title-cart .caret {
    display: inline-block;
    line-height: 1;
    color: #aaa;
    margin-top: 2px;
    vertical-align: middle;
}
.minicart-wrapper .title-cart .counter-number {
    display: inline-block;
    vertical-align: middle;
    font-weight: inherit;
    color: rgba(255,255,255,1);
    text-align: center;
    line-height: 1;
    margin-bottom: -2px;
}
.minicart-wrapper .title-cart .divider {display: inline-block; vertical-align: middle; color: rgba(255,255,255,0.4); position: relative; top: 1px; font-weight: inherit;}
.minicart-wrapper .title-cart .subtotal {
    margin: 0;
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    margin-bottom: -2px;
}
.minicart-wrapper .title-cart .subtotal .price-container {display: inline-block;}
.minicart-wrapper .title-cart .subtotal .price {font-size: inherit; color: inherit; font-weight: inherit;}


.minicart-items .product .toggle {border: 0; padding: 0 40px 5px 0;}
.minicart-items .subtitle {display: none;}
.minicart-items .item-options dt {text-align: left;}



.block-minicart .items-total {float: left; margin: 0 10px; display: none;}
.block-minicart .items-total .count {font-weight: 700;}
.block-minicart .subtotal {
    text-align: right;
    border-top: dashed 1px rgba(0,0,0,.1);
    font-family: 'Montserrat', sans-serif;
    padding: 18px 0;
}
.block-minicart .subtitle {display: none;}
.block-minicart .subtotal .price-container {
    display: inline-block;
    font-size: 24px;
    line-height: 1.25em;
    padding: 0;
    color: #000000;
    font-weight: 300;
}
.block-minicart .subtotal .label {
    color: #aaa;
    font-size: 11px;
    text-transform: uppercase;
    margin-right: 15px;
    top: -3.3px;
    position: relative;
}
.block-minicart .subtotal .price-container .price {display: inline-block; line-height: 1.25em; padding: 0; font-size: 24px;}
.block-minicart .subtitle.empty {display: block; font-size: 14px; padding: 5px 0 10px; text-align: center;}
.block-minicart .text.empty {text-align: center;}
.block-minicart .block-content > .actions {text-align: center; padding: 0;}
.minicart-wrapper .actions div.primary {display: inline-block; float: right;width: 80%;}
.minicart-wrapper .actions div.primary .btn {
    display: block;
    width: 100%;
    color: #FFFFFF;
    margin-bottom: 16px;
}
.minicart-wrapper .actions div.secondary {display: inline-block; vertical-align: middle; float: left;}
.minicart-wrapper .actions div.secondary .btn {
    border: none;
    padding: 8px 13px;
    text-transform: none;
    background-color: #eee;
    border-radius: 4px;
    color: #222;
}
.minicart-wrapper .actions div.secondary .btn span span {display: none;}
.minicart-wrapper .actions div.secondary .btn:hover {color: #000000;background-color: transparent;}
.minicart-wrapper .actions div.secondary .btn:after {content: none;}
.minicart-wrapper .actions div.secondary .btn i {
    display: inline-block;
    margin-left: 0;
    vertical-align: middle;
    line-height: 1;
    font-size: 20px;
}
.block-minicart .block-content > .actions .paypal-logo {margin-top: 15px; text-align: center;}
.block-minicart .block-category-link,
.block-minicart .block-product-link,
.block-minicart .block-cms-link,
.block-minicart .block-banners {margin: 15px 0 0; text-align: center;}
.minicart-wrapper:before,
.minicart-wrapper:after {content: ''; display: table;}
.minicart-wrapper:after {clear: both;}
.minicart-wrapper .action.showcart {cursor: pointer; display: inline-block; text-decoration: none;white-space: nowrap; opacity: 1;}
.minicart-wrapper .action.showcart:hover,
.minicart-wrapper .action.showcart.active {display: inline-block; text-decoration: none; background-color: rgba(255, 255, 255, 0.2);}
.minicart-wrapper .block-minicart {
    background: #fff;
    z-index: 9999;
    position: absolute;
    right: 0px;
    top: 100%;
    width: 404px;
    padding: 0;
    margin-top: -1px !important;
    color: #666;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    padding: 30px 30px 20px;
    display: none;
}
.minicart-wrapper.active {overflow: visible;}
.minicart-wrapper.active .block-minicart {display: block;}
.minicart-wrapper .block-minicart .block-title {
    font-size: 18px;
    line-height: 26px;
    font-weight: 300;
    letter-spacing: -.4px;
    text-transform: none;
    border-bottom: solid 1px rgba(0,0,0,.1);
    padding: 0 0 9px;
    margin-bottom: 15px;
}
.minicart-wrapper .block-minicart.empty .block-title {display: none;}
.minicart-wrapper .product .actions > .primary,
.minicart-wrapper .product .actions > .secondary {float: none; width: auto; margin: 0;}
.minicart-wrapper .action.close {
    background: none;
    background-image: none;
    border: 0;
    box-shadow: none;
    display: none;
    font-weight: 400;
    height: 40px;
    line-height: inherit;
    margin: 0;
    moz-box-sizing: content-box;
    padding: 0;
    position: absolute;
    right: 0;
    text-decoration: none;
    text-shadow: none;
    top: 0;
    width: 40px;
}
.minicart-wrapper .action.close:focus,
.minicart-wrapper .action.close:active {background: none; border: none;}
.minicart-wrapper .action.close:hover {background: none; border: none;}
.minicart-wrapper .action.close.disabled,
.minicart-wrapper .action.close[disabled],
fieldset[disabled] .minicart-wrapper .action.close {cursor: not-allowed; opacity: .5; pointer-events: none;}
.minicart-wrapper .action.close > span {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.minicart-wrapper .action.close:before {
    color: #8f8f8f;
    content: '\0041';
    display: inline-block;
    font: normal normal normal 14px/1 'meigee';
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    font-weight: normal;
    line-height: 16px;
    margin: 0;
    overflow: hidden;
    speak: none;
    text-align: center;
    vertical-align: top;
}
.minicart-wrapper .action.close:hover:before {color: inherit;}
.minicart-wrapper .action.close:active:before {color: inherit;}
.minicart-items-wrapper {overflow-y: auto;}
.minicart-items {list-style: none none; margin: 0 0 20px; /* height: auto!important; */ padding: 0; overflow: hidden; /* overflow-y: auto; */}
.minicart-items .product-item {
 padding: 0 0 20px;
 margin: 0;
 clear: both;
 position: relative;
}
.minicart-items .product-item-pricing .label {display: none; width: 4.5rem;}
.minicart-items .options {margin-bottom: 4px;}
.minicart-items .options .list {margin-bottom: 0; text-align: left;}
.minicart-items .price-minicart {margin-bottom: 5px;}
.minicart-items .product-item-name {font-weight: 400; font-size: 15px; margin: 0 45px 6px 0; display: block; text-align: left;}
.minicart-items .product-item-details {padding-left: 75px; position: relative;}

.minicart-items .product-item-details .price-container {display: inline-block;}

.minicart-items .product-item-details .price-including-tax,
.minicart-items .product-item-details .price-excluding-tax {margin: 5px 0;}
.minicart-items .product-item-details .weee[data-label] {font-size: 1.1rem;}
.minicart-items .product-item-details .details-qty {float: left; margin-right: 2px;}
.minicart-items .product > .product-item-photo,
.minicart-items .product > .product-image-container {float: left;}
.minicart-items .product .toggle {border: 0; padding: 0 40px 5px 0;text-align: left;}
.minicart-items .product .toggle:after {color: #8f8f8f; margin: 0 0 0 5px; position: static; }
.minicart-items .product .active > .toggle:after {content: '\e621';}
.minicart-items .product.pricing {margin-top: 3px;}
.minicart-items .product.options .tooltip.toggle {display: inline-block; text-decoration: none;}
.minicart-items .product.options .tooltip.toggle > span {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.minicart-items .product.options .tooltip.toggle:after {
    color: inherit;
    content: '\e622';
    display: inline-block;
    font-family: 'luma-icons';
    font-size: 12px;
    font-weight: normal;
    line-height: 12px;
    margin: -3px 0 0 7px;
    overflow: hidden;
    speak: none;
    text-align: center;
    vertical-align: middle;
    webkit-font-smoothing: antialiased;
}
.minicart-items .product.options .details {display: none;}
.minicart-items .item-qty {
    display: inline-block;
    vertical-align: middle;
    height: 18px;
    width: 18px;
    line-height: 18px;
    background-color: #3eb051;
    padding: 0;
    border: none;
    min-width: auto;
    text-align: center;
    border-radius: 50%;
    font-weight: inherit;
    font-size: 11px;
    color: #fff;
}
.minicart-items .update-cart-item {font-size: 1.1rem; display: inline-block; vertical-align: middle;}
.minicart-items .subtitle {display: none;}
.minicart-items .product.actions {position: absolute; right: 0; top: 0;}
.minicart-items .action.edit,
.minicart-items .action.delete {color: rgba(0,0,0,.4); /*font-size: 16px; */padding: 5px;}
.minicart-items .action.edit:hover,
.minicart-items .action.delete:hover {color: #000000;}
.minicart-items .action.edit > span,
.minicart-items .action.delete > span {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.minicart-items .action.edit:before,
.minicart-items .action.delete:before {
    content: '\f040';
    display: inline-block;
    font-family: "FontAwesome";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    margin-right: 2px;
    line-height: 1;
    position: relative;
    top: 2px;
}
.minicart-items .action.delete:before {content: '\f1f8';}

/* !Header Cart */

不过，我认为最相关的一点是:

.minicart-items-wrapper {overflow-y: auto;}
.minicart-items {list-style: none none; margin: 0 0 20px; /* height: auto!important; */ padding: 0; overflow: hidden; /* overflow-y: auto; */}
.minicart-items .product-item {
 padding: 0 0 20px;
 margin: 0;
 clear: both;
 position: relative;
}

检查元素时，这似乎是渲染 HTML，很难理解，因为我使用的是 Magento。

<div data-action="scroll" class="minicart-items-wrapper" style="height: 98px;">
        <ol id="mini-cart" class="minicart-items" data-bind="foreach: { data: getCartParam('items'), as: 'item' }">
            <!-- ko foreach: $parent.getRegion($parent.getItemRenderer(item.product_type)) -->
                <!-- ko template: {name: getTemplate(), data: item, afterRender: function() {$parents[1].initSidebar()}} -->
<li class="item product product-item odd last" data-role="product-item">
    <div class="product clearfix">
        <!-- ko if: product_has_url -->
        <a data-bind="attr: {href: product_url, title: product_name}" tabindex="-1" class="product-item-photo" href="https://www.bodysocks.co.uk/english/duck-mask.html" title="Latex Duck Mask">
            <!-- ko foreach: $parent.getRegion('itemImage') -->
                <!-- ko template: {name: getTemplate(), data: item.product_image} -->
<span class="product-image-container" data-bind="style: {width: width + 'px'}" style="width: 60px;">
    <span class="product-image-wrapper" data-bind="style: {'padding-bottom': height/width*100 + '%'}" style="padding-bottom: 130%;">
        <img class="product-image-photo" data-bind="attr: {src: src, alt: alt}, style: {width: width + 'px', height: height + 'px'}" src="https://www.bodysocks.co.uk/pub/media/catalog/product/cache/thumbnail/60x78/beff4985b56e3afdbeabfc89641a4582/d/u/duck2_2.jpg" alt="Latex Duck Mask" style="width: 60px; height: 78px;">
    </span>
</span>
<!-- /ko -->
            <!-- /ko -->
        </a>
        <!-- /ko -->
        <!-- ko ifnot: product_has_url --><!-- /ko -->

        <div class="product-item-details">
            <strong class="product-item-name">
                <!-- ko if: product_has_url -->
                <a data-bind="attr: {href: product_url}, text: product_name" href="https://www.bodysocks.co.uk/english/duck-mask.html">Latex Duck Mask</a>
                <!-- /ko -->
                <!-- ko ifnot: product_has_url --><!-- /ko -->
            </strong>

            <!-- ko if: options.length --><!-- /ko -->

            <div class="product-item-pricing">
                <!-- ko if: canApplyMsrp --><!-- /ko -->
                <!-- ko ifnot: canApplyMsrp -->
                <!-- ko foreach: $parent.getRegion('priceSidebar') -->
                    <!-- ko template: {name: getTemplate(), data: item.product_price, as: 'price'} -->
<div class="price-container">
  <span class="price-wrapper" data-bind="html: price">
    <span class="price-including-tax" data-label="Incl. Tax">
            <span class="minicart-price">
            <span class="price">£12.99</span>        </span>

        </span>

</span>
</div>
<!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->

                <div class="details-qty qty">
                    <label class="label" data-bind="i18n: 'Qty', attr: {
                           for: 'cart-item-'+item_id+'-qty'}" for="cart-item-105-qty">Qty</label>
                    <input data-bind="attr: {
                           id: 'cart-item-'+item_id+'-qty',
                           'data-cart-item': item_id,
                           'data-item-qty': qty,
                           'data-cart-item-id': product_sku
                           }, value: qty" type="text" size="4" class="item-qty cart-item-qty form-control" maxlength="12" id="cart-item-105-qty" data-cart-item="105" data-item-qty="1" data-cart-item-id="BS-MASK-DUCK">
                    <button data-bind="attr: {
                           id: 'update-cart-item-'+item_id,
                           'data-cart-item': item_id,
                           title: $t('Update')
                           }" class="update-cart-item btn btn-default" style="display: none" id="update-cart-item-105" data-cart-item="105" title="Update">
                        <span data-bind="i18n: 'Update'">Update</span>
                    </button>
                    <span class="hoker-icon qt-x"></span>
                </div>
            </div>

            <div class="product actions">
                <!-- ko if: is_visible_in_site_visibility -->
                <div class="primary">
                    <a data-bind="attr: {href: configure_url, title: $t('Edit item')}" class="action edit" href="https://www.bodysocks.co.uk/english/checkout/cart/configure/id/105/product_id/302/" title="Edit item">
                        <span data-bind="i18n: 'Edit'">Edit</span>
                    </a>
                </div>
                <!-- /ko -->
                <div class="secondary">
                    <a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}" class="action delete" data-cart-item="105" title="Remove item">
                        <span data-bind="i18n: 'Remove'">Remove</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</li>
<!-- /ko -->
            <!-- /ko -->
        </ol>
    </div>

希望这足以对您有所帮助。提前致谢。

最佳答案

据我所知，一个元素的总高度似乎大于其容器的高度。至少当只有一个时，您需要确保容器至少与元素高度相同。

您可以让元素容器稍微高一点，或者更好的解决方案是在第一个和最后一个元素时从元素中移除填充。

像这样

.minicart-items .product-item:first-child:last-child{
  padding: 0
}

这应该足以让它变小。

关于html - CSS 仅在必要时溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46361687/

上一篇：css - 如何对齐按钮和输入(在表单上)，并将它们拉到 Bootstrap 面板标题上

下一篇：HTML :visited selector not working when using target ="_blank" in IE11

相关文章：

css - Internet Explorer 中的 SVG 缩放

php - 自定义 Magento 订单字段和 Magento 数据库

mysql - Magento 客户终身值(value)

jquery - 使用 AJAX 在同一页面中显示文本区域字段

php - 如何为 DOMPDF 中的特定 HTML 元素设置全宽

javascript - 像素到厘米的转换脚本不起作用

css - Chrome 获取 "user agent stylesheet"

html - 带有背景图像的渐变 CSS

javascript - 使用 show.hide 显示 div 时出现问题？

javascript - 如何打印 HTML 地理定位？

©2024 IT工具网  联系我们