HTML Scroll-bar in a div

Question

I have one page , made by different DIVs , the main one is:

<div id='pagina'>

        <?php
            if(!isset($_SESSION['iduser']))
            {
                header( "refresh:5;url=formLogin.php" );
                echo "<h3>Per vedere le tue registrazioni devi effettuare il Login. Reindirizzamento alla pagina di Login...</h3>";
            }
            else
            {
                $conn = mysqli_connect('localhost','root',''); 
                if(!$conn)
                    die ("Errore di connessione!");
                mysqli_select_db($conn,'meteo') or die ("Errore di connessione al database!");

                $user=$_SESSION['iduser'];

                $q="SELECT idrilevazione,citta,stato,data,descMeteo,temperatura,tempPercepita,tempMassima,tempMinima,umidita,vento,oraAlba,oraTramonto FROM rilevazioni WHERE utente='$user' "; 
                $r=mysqli_query($conn,$q);
                if(mysqli_num_rows($r)<1)
                {
                    header( "refresh:5;url=rilStandardForm.php" );
                    echo "<h3>Nessuna rilevazione dell'account ".$_SESSION['username'].". Reindirizzamento alla pagina di rilevazione...</h3>"; 
                }
                else
                {
                    ?>
                    <table width="500" lenght="200" align="center" border="2">

                    <tr><td colspan="13">LE TUE RILEVAZIONI </td></tr>
                    <tr>
                        <td>ID Rilevazione</td>
                        <td>Citta'</td>
                        <td>Stato</td>
                        <td>Data</td>
                        <td>Meteo</td>
                        <td>Temperatura</td>
                        <td>Temperatura percepita</td>
                        <td>Temperatura massima</td>
                        <td>Temperatura minima</td>
                        <td>Umidita</td>
                        <td>Vento</td>
                        <td>Ora alba</td>
                        <td>Ora tramonto</td>
                    </tr>
                    <?php
                    while($row=mysqli_fetch_array($r))
                    {   ?>
                        <tr>
                            <td><?php echo $row['idrilevazione'] ?> </td>
                            <td><?php echo $row['citta'] ?> </td>
                            <td><?php echo $row['stato'] ?> </td>
                            <td><?php echo date("j F Y, H:i:s",$row['data']) ?> </td>
                            <td><?php echo $row['descMeteo'] ?> </td>
                            <td><?php echo $row['temperatura'].' C&ordm;' ?> </td>
                            <td><?php echo $row['tempPercepita'].' C&ordm;' ?> </td>
                            <td><?php echo $row['tempMassima'].' C&ordm;' ?> </td>
                            <td><?php echo $row['tempMinima'].' C&ordm;' ?> </td>
                            <td><?php echo $row['umidita'].'%' ?> </td>
                            <td><?php echo $row['vento'].' km/h' ?> </td>
                            <td><?php echo date("H:i:s",$row['oraAlba']) ?> </td>
                            <td><?php echo date("H:i:s",$row['oraTramonto']) ?> </td>
                        </tr>   

                <?php  } ?> </table> 
        <?php } } ?>
        </div>

In few words , it generates a table with some data from a database. The problem is that when i have lots of tuples the table goes beyond the bottom limit of the div. So, i tried to put in my css:

overflow:auto;

or

overflow-y:auto;

But it doesn't work anyway. How can i do it?

Answer 1

You can try this :

overflow:scroll;

or this :

var example = document.getElementById("example_id");
example.scrollTop = example.scrollHeight;

For more informations, you can go here Scroll to bottom of div?