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>
希望这足以帮助我们。提前谢谢。
1 个答案:
答案 0 :(得分：0)
从我可以看出，项目的总高度似乎比其容器的高度大。您至少在只有一个容器时，需要确保容器至少与项目的高度相同。
你可以让物品容器更高更高或更好的解决方案是从物品的第一个和最后一个物品上移除填充物。
喜欢这样
.minicart-items .product-item:first-child:last-child{
padding: 0
}
这应该足以让它变小。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？