jQuery to add vertical scroll bar for a fixed height div container

Question

Hi all:

This is uni homework so sorry about :my password protected url

Please enter usersame as "uts" and password as "10479475", without the wrapper quotes.

It it almost completed, please follow simple steps to see where my problem dwells: (preferably using Firefox, no IE6 welcomed :))

step1: click on any continent highlighted on world map;

step2: click on any city marked on continent map;

step3: enter quantity ranging from 1 to 6 into the upper-right table;

step4 : there you go, in the table below, once row is equal or greater than 3, then the size of table starts to "overlap" on top of the footer section and continues to grow, which is not what I want.

I want to achieve the effect that the table size has a limited max-height, so once actual height exceeds the threshold, then I can have a vertical scroll bar so to "stack up" my table and not to break the overall structure. It turns out that my lazy initial design now gets myself stuck in a problem...

Any suggestion and hint on how to get this?

Answer 1

I would try it without jQuery. Can't you simply set your "height" attribute in CSS?

#cart_wrapper{height:100px;} // this will be whatever your max height should be.

<div id="cart_wrapper">
    <div id="shopping_cart">
        <fieldset><!-- this is all your cart content--></fieldset>
    </div>
</div>

PS: I was just "winging it" with the ID's... I didn't check your source.

Answer 2

<table style="height:150px;overflow:scroll">

Answer 3

This example shows how to get a 100% height div that adds a scrollbar to itself as necessary, when content is added to a table contained within.