我正在使用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-contenthttp://img.558idc.com/uploadfile/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%?谢谢你
ul.cart_list { overflow: scroll; }