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


how to add scrollbar in fixed container

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

这是容器的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;}

请帮助我在该容器中添加滚动条的编辑位置

您可以添加overflow-y或overflow-x来实现这一点,具体取决于您想要滚动的方向。我猜你想上下滚动。因此,当您的div的内容(产品)增加超过其限制时,会出现div的滚动条

示例:

<!-- Scroll bar present but disabled -->
    <div style="width: 200px; height: 100px; overflow-y: scroll;">
        test
        </div>
    <!-- Scroll bar present and enabled -->        
        <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>

添加

overflow:scroll 

到要具有滚动条的元素。