我正在使用wordpress与woocommerce创建eshop。 Woocommerce有一部分名为mini-cart.php它是客户的实际购物车。但是我需要这个购物车最多占整个网站高度的60%,我需要购物车内容可滚动。这很容易,但我需要的第二件事是从滚动中排除按钮和总数。我尝试了很多方法,但它永远不会奏效。这是我使用的代码:
<div class="cart active">
<div class="cart-wrapper">
<h1 class="widget-title"> </h1><div class="widget_shopping_cart_content"><div class="cart-product-list">
<ul class="cart_list product_list_widget ">
<li><a href="http://autoflex.zone42.sk/obchod/2x-stabilizator-predna-naprava-porsche-911-od-09-1997/">
<img src="http://autoflex.zone42.sk/wp-content/uploads/2013/10/2x-stabilizátor-predná-náprava-Porsche-Boxster-od-09.1996-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="2x stabilizátor predná náprava Porsche 911 od: 09.1997" height="90" width="90">
2x stabilizátor predná náprava Porsche 911 od: 09.1997
</a>
<p class="quantity">1 × <span class="amount">50,90€</span></p>
</li>
</ul>
</div><!-- end product list -->
<p class="total"><strong>Medzisúčet:</strong> <span class="amount">50,90€</span></p>
<div class="buttons">
<a href="http://autoflex.zone42.sk/kosik/" class="button">
<div class="cart-buttons">
<div class="cart-buttons-padding">
Zobraziť košík → </div>
</div>
</a>
<a href="http://autoflex.zone42.sk/pokladna/" class="button checkout">
<div class="cart-buttons">
<div class="cart-buttons-padding">
pokladňa → </div>
</div>
</a>
</div>
</div>
这是CSS:
.cart.active{
max-height: 60%;
margin-bottom: -25px;
transition: max-height .5s .2s;
-ms-transition: max-height .5s .2s;
-moz-transition: max-height .5s .2s;
-webkit-transition: max-height .5s .2s;
}
div.facebook:hover, div.mail-us:hover, div.move-up:hover, div.cart-total.hoverOn:hover{
right: 150px;
}
div.cart-total.hoverOn{
transition: all .5s, width .5s .5s;
}
div.cart-total.hoverOff{
transition: all .5s, width .2s;
right: 150px;
width: 279px;
}
.cart-product-list{
overflow-y: auto;
}
那么如果我只想要ul(cart_list)可滚动,我该怎么办?而且我还希望整个div名称购物车活跃在整个网站的最高60%?谢谢你前进
答案 0 :(得分:7)
ul.cart_list {
overflow: scroll;
}