Question

我想在固定的购物车产品容器中添加滚动条，这样当我在购物车中添加太多产品时，我可以通过向下滚动容器中的产品轻松查看

以下是容器的HTML代码

?>
    <div class="right_nav" >
        <div class="right_nav_top">
           Your Cart
        </div>
        <hr width="130px">

        <table width="167" border="0" cellpadding="0" cellspacing="0" style="font-size:12px; margin:5px; overflow:auto">
<?php

//iterate through the cart, the $product_id is the key and $quantity is the value

foreach($_SESSION['cart'] as $product_id => $quantity) { 

//get the name, description and price from the database - 
//this will depend on your database implementation.
//use sprintf to make sure that $product_id is inserted into the query as a number - 
//to prevent SQL injection

$sql = sprintf("SELECT 
    event_title, 
    event_desc, 
    price 
    FROM events 
    WHERE id = %d;",
    $product_id); 

$result = mysql_query($sql);

//Only display the row if there is a product 
//(though there should always be as we have already checked)

if(mysql_num_rows($result) > 0) {

list($name, $description, $price) = mysql_fetch_row($result);

$line_cost = $price * $quantity; //work out the line cost
$totals = $total + $line_cost; //add to the total cost

?>

<tr>
    <td colspan="3"><?php echo $name;?></td>
</tr>
<tr>
    <td width="31"><?php echo $quantity;?>x</td>
    <td width="59">&pound<?php echo $line_cost?></td>
    <td width="70">
        <a href="<?php Site_titte();?>/viewcart.php?action=add&id=<?php echo $product_id;?>" title="Add">
            <img src="<?php Site_titte();?>/images/addred.png" width="24" height="24" border="none">
        </a>
        <a href="<?php Site_titte();?>/viewcart.php?action=remove&id=<?php echo $product_id;?>" title="Remove">
            <img style="margin-bottom:6px;" src="<?php Site_titte();?>/images/icon_close.png"  border="none"></a></td>
</tr>

<?php }}?>

</table>

<?php

if(!isset($_SESSION['uid']))
    {$link="login.php";}
else
    {$link=Site_titte()."/order.php";}
                    ?>
<hr width="130px">
    <div class="total_main">
        <div class="total_p1">Total</div>
        <div class="total_p2">&pound<?php echo $total ?></div>
        <div class="clearfix"></div>
    </div>
    <br>
    <center>
        <a href="<?php echo $link;?>">
            <img src="<?php Site_titte();?>/images/btn_order.png" border="none" width="140" height="38">
        </a>
    </center>
</div>

<?php

    }
else {

?>           

<div class="right_nav2">
    <div class="right_nav_top2">
        Your Cart
    </div>
    <hr width="130px"> 
        <table border="0" cellpadding="0" cellspacing="5" style="font-size:14px; margin:5px;">     
            <tr>
                <td colspan="3">Your cart is empty.</td>
            </tr>

</table>

这是css代码

.right_nav2{
    position: fixed;
    bottom: 0px;
    right: 0; 
    top:220px;
    margin: 0 10px 10px 0; 
    border: #DBDBDB 1px solid;
    border-radius: 5px;
    background-color:#fff; 
    height:150px; 
    width:150px;  }

.right_nav_top2{
    position:relative; 
    background:url(images/icon_cart_small.png) right no-repeat; 
    color:#214200; 
    margin: 12px; 
    font-size: 19px; }

.right_nav{
    position: fixed;
    right: 0; 
    top:220px; 
    border: #DBDBDB 1px solid;
    border-radius: 5px;
    background-color:#fff; 
    style="max-height: 552px;; 
    width:150px; }

.right_nav_top{
    position:relative; 
    background:url(images/icon_cart_small.png) right no-repeat; 
    color:#214200; 
    margin: 12px; 
    font-size: 19px;}

.total_main{
    position:relative; 
    background:#dbdbdb; 
    font-size: 14px;}

.total_p1{
    position:relative; 
    float:left; 
    margin: 5px 11px 5px 12px;}
.total_p2{
    position:relative; 
    float:left; 
    margin: 5px 11px 5px 0px;}

请帮助我在哪里编辑以在此容器中添加滚动条

Answer 1

您可以添加overflow-y或overflow-x来实现此目的，具体取决于您要滚动的方向。我猜你要上下滚动。因此，当您的div增加内容（产品）超过其限制时，将显示div的滚动条。请参阅以下示例：

示例：

 <div style="width: 200px; height: 100px; overflow-y: scroll;"> test </div>  <div style="width: 200px; height: 100px; overflow-y: scroll;"> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> </div>

Answer 2

添加

overflow:scroll

到你想要滚动条的元素。

如何在固定容器中添加滚动条

2 个答案: