1. 首页
  2. 问答
  3. 仅在必要时CSS溢出

仅在必要时CSS溢出

2017-09-22 57 views
0

我的商店里有一个迷你手推车，用于显示篮子中的所有产品。我试图让购物车的滚动条出现在篮子中有很多产品的情况下，因此您需要滚动才能看到它们，以便购物车保留在页面上。仅在必要时CSS溢出

但是，即使没有必要，滚动条总是存在，我不知道如何阻止它发生。请参见下图：

这里是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>

希望这足以提供帮助。提前致谢。

来源

2017-09-22 James

+0

有没有一个地方我们可以试试它？ –

+0

@PraveenKumar不幸的是，它现在正在我的网络上的本地机器上运行。 – James

回答

0

从我可以看出，似乎物品的总高度大于其容器的高度。至少当只有一个容器时，您需要确保容器的高度至少与物料的高度相同。

您可以将物品容器设置为较高的较高物品，或者更好的解决方案是在其物品的第一个和最后一个物品上移除物品的填充物。

像这样

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

这也许应该是足以令它更小。

来源

2017-09-22 10:55:25 ZeWebDev

+0

谢谢，你的理论也是我的理论，但我不能一起解决问题。我已经给你的代码去了，唉，仍然有同样的问题。 – James

相关问题

 相关问题